Vue 本地应用图片切换 v-show v-bind实践

news2024/11/26 18:38:45

点击切换图片的本质，其实修改的是img标签的src属性。

图片的地址有很多个，在js当中通过数组来保存多个数据，数组的取值结合索引，根据索引可以来判断是否是第一张还是最后一张。

图片的变化本质是src属性被修改了，属性的修改使用v-bind指令。

a标签在点击的时候要执行逻辑，那么事件绑定是v-on，在第一张和最后一张图片隐藏某个a标签，因为切换的比较频繁，考虑到性能问题使用v-show指令。

首先要定义图片数组，在data当中定义data数组，将地址存储进去。

接着添加图片索引，如果是从数组第一个获取的话，那么值是0。

然后使用v-bind指令，将地址和img的src属性绑定，获取的方式其实就是数组+索引

点击上一张和下一张图片，本质是修改了索引的值，这部分的逻辑写在methods中，

下一张可以取名为pre next，逻辑简单，只需要去递增和递减索引就行了

左右箭头的显示条件略有不同，一个是不为第一张，索引不为0就行了。如果不为最后一张，只需要判断所应的长度比数组小，指令使用v-show。

左边的按钮只需要索引不为0就可以使用了，为0相当于第一张。右边按钮只需要比数组的长度小就可以显示了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style type="text/css">

    </style>
</head>
 
<body>  
<div id="app">
  <!--现在是基于数据来生成src的属性-->
  <button type="button" @click="pre" v-show="index!= 0">上一张</button>
  <button type="button" @click="next" v-show="index<imgArr.length-1">下一张</button>
  <img :src="imgArr[index]" alt="">
</div>
         
    <script type="text/javascript">        
      new Vue({   
          el: "#app",   
          data:{ 
            imgArr:[
              "./1.jpg",
              "./2.jpg",
              "./3.jpg",
            ],
            index: 0,
          },
          methods:{
            pre:function(){
               this.index--;
            },
            next:function(){
               this.index++;
            }
          }
       })
    </script>
 
</body>
</html>

这里使用v-if也是可以的。v-if是直接将元素从dom树里面移除，性能的消耗而言会大一些，不建议使用。