让我踩坑的超链接href属性

序
实例

序

实习第三个月，最近重温Vue框架——开发被迫前端，我都快深度怀疑自己了，自己写案例，对照源码对比，我硬是觉得明明都一样，为啥偏我的不行，然后通过实验，发现了是href属性这个小妖精在作祟。

实例

是打算写一个图片更换的例子，第一张图左箭头消失，最后一张右箭头消失，其余均能实现正常图片左右切换。

基本代码

DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件绑定title>
    <script type="text/javascript" src="js/vue.js">script>
head>
<body>
<div id="app">
    <a href="" @click="prev" v-show="index==0?false:true"><img src="img/翻页1.png" alt="">a>
    <img width="1000px" :src="url[index]" alt=""/>
    <a href="" @click="next" v-show="index==6?false:true"><img src="img/翻页2.png" alt="">a>
div>
<script>
    new Vue({
        el:'#app',
        data:{
            url:[
                "img/1.png", "img/2.png",
                "img/3.png", "img/4.png",
                "img/5.png", "img/6.png",
                "img/7.png"
            ],
            index:0
        },
        methods:{
            prev:function () {
                this.index--;
            },
            next:function () {
                this.index++;
            }
        }
    })
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

分析

图片显示：将要切换的图片资源放在数组中，通过v-bind——可简写为:属性与img图片标签的src属性绑定
左右切换：用超链接标签包裹左右箭头的图片，用v-show来确定该箭头是否显示，源码中index==0?false:true/index==6?false:true该部分可替换为index>0/index<6
事件绑定：给左右箭头添加单击事件修改数组下标值从而达到切换资源的目的

问题

至此，基本功能已经基本实现，然后切换时，如基本代码所示，a标签中添加了href属性，但值为空，切换图片时会一闪而过，一直停留在当前图片，无法切换。原因其实是，值为空时默认刷新了。

当href属性值为#时，图片能正常切换，但如果在div前加上多行，就可以发现，每切换一张图片，都是默认回到顶端，往下滑动才能看到图片。此时#的作用是锚点，#自定义位置名能够指定跳转到某一位置。

当href属性值为javascript:;/javascript:void(0);时，图片能正常切换，页面不需要移动（上下滑动，如果有多个空行）。此时，它与效果一致，禁用掉了href属性，仅仅作为一个占位符使用。

总结

，href属性为空，点击超链接会默认刷新
标签是超链接，但是没有 href 属性，它仅仅是超链接的一个占位符。
，href属性值为#，则表示的该标签作用是定位，#包含了一个位置信息，默认的锚在页面的顶端
，href的这一串属性值表示禁用掉了该属性，不进行资源的跳转与访问，仅作为普通标签使用

相关阅读:
SpringBoot项目调用Matlab方法
实验五：Java多线程程序设计
【大麦小米学量化】量化基础之Python编程（小白入门第一课）
CIO40: 数字化落地最佳实践（16000字）
优化理论06-----非线性共轭梯度法: HS、FR-CG、PR-CG、PR+-CG
LiveData 与 StateFlow，我该用哪个？
软考备考-程序员-备考笔记
19 OpenCV 霍夫曼变换检测圆
Redis集群的三种配置方式案例
php Xdebug的安装与使用详解

原文地址：https://blog.csdn.net/weixin_51229662/article/details/127627227