Vue中点击按钮切换图片;

页面效果比较差,但是有图总比没图强点

这是最开始的页面,我们看到,图中只有一个"右箭头",点击右箭头;

左箭头也有了,然后我们继续点击右箭头;

右箭头没有了,只剩下了左箭头,

以上就全部的效果图了;

分析一下,如何做到这个功能:

1.先不要去考虑样式(虽然确实丑,但景色还是不错的对吧),我们一般都是怎样存放多条数据的呢?

2.我们应该如何去隐藏左箭头按钮或者右箭头按钮呢?

3.vue指令中隐藏的指令有哪些?有什么不同呢?

好,第一,我们一般存放数据都是采用数组的方式,方便存放多条数据,因为数组有长度和索引,方便查找;

第二 ,当图片是第一张时,我们隐藏左箭头按钮,因为已经是第一张了,不能再继续点击了.当图片为最后一张时,隐藏右箭头,因为已经是最后一张了,当图片不是一张和最后一张时,左右箭头都显示;

第三.vue指令中有两个是用来隐藏和显示的,1.v-show 2.v-if

它们的区别:v-show是操作dom节点的属性(display:none) 而v-if则比较狠,它直接删除了该dom节点,需要显示的时候再加过来;

相对于v-show来说 v-if比较消耗资源;较为频繁的隐藏显示,推荐使用v-show;至于v-if则视情况而定

上代码:

第一步,仍然是先导入vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<style>
        .top{
            border: 1px solid ;
            width: 600px;
            height: 450px;
            margin-left: 30%;
            margin-top: 5%;
        }
        .img{
            width: 600px;
            height: 450px;
        }
        .left{
            width: 45px;
            height: 45px;
        }
        #left{
            width: 45px;
            height: 45px;
            background-color:red ;
            margin-left: 30%;
            margin-top: -25%;
        }
        #right{
            width: 45px;
            height: 45px;
            margin-left: 66.5%;
            margin-top: -3.65%;
        }
    </style>

这个是我写的样式;

<body>
    <div id="app">
        <div  class="top">
            <img class="img" :src="imgArr[index]" alt="">
        </div>
       <div id="left">
        <a href="javascript:void(0)" @click="left" v-show='index!=0'> 
            <img  class="left" src="./img/left.jpg">
        </a>
       </div>  
       <div id="right">
       <a href="javascript:void(0)" @click="right" v-show='index<imgArr.length-1'>
            <img class="left" src="./img/right.jpg">
        </a>
       </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            imgArr:[
            "./img/0.jpg",
            "./img/1.jpg",
            "./img/2.jpg",
            ],
            index:0
        },
        methods:{
            left:function(){
                    this.index--;
                    
            },
            right:function(){
                    this.index++;
                    console.log(this.index)
          
            }
        }
    })
</script>

详细解释一下,我们可以看到在div img的src 路径是在data中写的,所以在vue中我们切换图片操作的是数据;

我们在data中创建一个数组imgArr[],在数据中添加进去数据,也就是图片;然后在创建一个index(下标)=0;

这样,我们就可以将<img class="img" src="./img/0.jpg" alt=""> 中的src进行改变了,

将src="./img/0.jpg" 改成 :src="imgArr[index]"

注意区别: 改之后src前面有一个":",这其实是v-bind:的缩写,所以改之后就是vue的指令了;

这时,我们运行就可以看到第一张图片显示出来了;

然后我们再去写左右箭头,写两个方法吧,"left"和"right";

逻辑很清晰,当我们点击左箭头按钮时,就将下标index-1.同理,点击右键头就+1;

如上图我们写那样 this.index++ this.index--;

写好这些以后我们发现就可以切换图片了,但是,当index为负数时,就不会出现图片了,这时我们就要给添加一个限制了

逻辑也很简单,分析一下,我们采用的数组存数据,那么我们可以以数组下标为限制那么我们在左箭头按钮上就写vue指令 v-show="index!=0"

意思是当index不等0的时候显示,当index=0时候隐藏; 左箭头写好了;

那么右键头,我们可以采取与数组的长度作比较; 如: index<imgArr.length -1,同理也写在v-show中;

这样当index下标等于数组长度-1时就会隐藏,这样到了最后一张就会隐藏了;

Vue中点击按钮切换图片;

猜你喜欢