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时就会隐藏,这样到了最后一张就会隐藏了;
 
posted @   大云之下  阅读(14626)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
大云之下
欢迎阅读『Vue中点击按钮切换图片;』
点击右上角即可分享
微信分享提示
AI IDE Trae