本文实例为大家分享了vue实现按钮切换图片的具体代码，供大家参考，具体内容如下
Tab选项卡
实现步骤
1、实现静态UI效果
用传统的方式实现标签结构和样式
2、基于数据重构UI效果
将静态的结构和样式重构为基于Vue模板语法的形式
处理事件绑定和js控制逻辑
设置基本样式
{
overflow : hidden ;
padding : 0 ;
margin : 0 ;
}
.tab ul li {
box-sizing: border-box;
padding : 0 ;
float : left ;
width : 100px ;
height : 45px ;
line-height : 45px ;
list-style : none ;
text-align : center ;
border-top : 1px solid #ccc ;
border-right : 1px solid #ccc ;
cursor : pointer ;
}
.tab ul li.active {
background-color : orange;
}
.tab ul li:first-child {
border-left : 1px solid blue ;
}
.tab div {
width : 500px ;
height : 300px ;
display : none ;
text-align : center ;
font-size : 30px ;
line-height : 300px ;
border : 1px solid blue ;
border-top : 0px ;
}
.tab div.current {
display : block ;
}
实现静态布局
< div id = "app" >
< button v-on:click = "handla" >向前切换</ button >
< button v-on:click = "handlc" >单向循环切换</ button >
< button v-on:click = "handle" >向后切换</ button >
< div class = "tab" >
< ul >
< li :class = "currentIndex==index?'active':''" :key = "item.id" v-for = "(item,index) in list" >{{item.title}}
</ li >
</ ul >
< div :class = "currentIndex==index?'current':''" :key = "item.id" v-for = "(item,index) in list" >
< img :src = "item.path" >
</ div >
</ div >
</ div >
实现具体功能
<script type= "text/javascript" src= "js/vue.js" ></script>
<script type= "text/javascript" >
/* */
var vm = new Vue({
el: '#app' ,
data: {
currentIndex: 0,
list: [{
id: 1,
title: 'apple' ,
path: 'img/apple.png'
}, {
id: 2,
title: 'orange' ,
path: 'img/orange.png'
}, {
id: 3,
title: 'lemon' ,
path: 'img/lemon.png'
}]
},
methods: {
handle: function () {
if ( this .currentIndex < 2) {
this .currentIndex = this .currentIndex + 1
}
},
handla: function () {
if ( this .currentIndex > 0) {
this .currentIndex = this .currentIndex - 1
}
},
handlc: function () {
this .currentIndex = this .currentIndex + 1
if ( this .currentIndex > 2) {
this .currentIndex = 0
}
},
}
})
</script>
最终效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_50001396/article/details/112790922