让我踩坑的超链接href属性

最新推荐文章于 2024-04-30 16:57:21 发布

kk爱闹

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量503

点赞数 2

分类专栏：异常报错处理文章标签： html5 javascript vue.js html

本文链接：https://blog.csdn.net/weixin_51229662/article/details/127627227

版权

异常报错处理专栏收录该内容

10 篇文章 0 订阅

订阅专栏

让我踩坑的超链接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>

分析

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

问题

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

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

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