vue中实现简单切换图片效果,vue动态切换图片
这篇文章主要为大家详细介绍了某视频剪辑软件实现按钮切换图片，正向反向以及顺序切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现按钮切换图片的具体代码，供大家参考，具体内容如下
标签选项卡
实现步骤
1、实现静态UI效果
用传统的方式实现标签结构和样式
2、基于数据重构UI效果
将静态的结构和样式重构为基于某视频剪辑软件模板语法的形式
处理事件绑定和射流研究…控制逻辑
设置基本样式
{
溢出：隐藏；
填充：0;
边距：0;
}。标签ul li {
框大小：边框-框；
填充：0;
浮动：左；
宽度：100像素
高度：45像素
行高：45像素
列表样式：无；
文本对齐：居中；
border-top:1px solid # CCC；
右边框：1px实心# ccc
光标：指针；
}。选项卡ul li.active {
背景色：橙色；
}。选项卡ul li:第一个孩子{
边框-左侧：1px纯蓝；
}。选项卡分区{
宽度：500像素
高度：300像素
显示：无；
文本对齐：居中；
字体大小：30px
行高：300像素；
边框：1px纯蓝；
border-top:0px；
}。选项卡分区当前{
显示：块；
}
实现静态布局
div id=应用程序
按钮点击=handla 向前切换/按钮
按钮v-on:点击=handlc 单向循环切换/按钮
按钮v-on:click=handle 向后切换/按钮
div class=tab
保险商实验所
李：是吗？活动“:”:列表" {item.title} "中的key=item.id v-for=(项目，索引)
/李
/ul
div :class=currentIndex==index？当前： :key=item.id v-for=(item，index) in list
img :src=item.path
/div
/div
/div
实现具体功能
脚本类型=text/javascript src=./js/vue.js/script
脚本类型=文本/javascript
/* */
var vm=new Vue({
埃尔： #app ，
数据：{
当前索引：0,
列表：[{
id: 1，
标题："苹果",
路径： img/apple.png
}, {
id: 2，
标题："橙色",
路径： img/orange.png
}, {
id: 3，
标题："柠檬",
路径： img/lemon.png
}]
},
方法：{
handle: function () {
if (this.currentIndex 2) {
这个。当前索引=this。当前索引1
}
},
handla: function () {
if (this.currentIndex 0) {
这个。当前索引=this。当前索引-1
}
},
handlc: function () {
这个。当前索引=this。当前索引1
if (this.currentIndex 2) {
this.currentIndex=0
}
},
}
})
/脚本
最终效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。