vue侧边菜单联动tab选项卡,vue tabbar 页面切换
这篇文章主要为大家详细介绍了某视频剪辑软件实现标签选项卡切换，点击不同标题显示对应图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现标签选项卡切换的具体代码，供大家参考，具体内容如下
点击不同的标题显示出相应的图片
代码如下
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
脚本src= js/vue。js type= text/JavaScript /script
/头
风格
*{
边距：0px
填充：0px
}
#tab{
宽度：420像素
边距：20px自动；
位置：相对；
}
#tab ul li{
宽度：100像素
高度：30px
边框：1px纯色# 6699CC
浮动：左；
列表样式：无；
文本对齐：居中；
行高：30px
}
#tab ul li:第一胎{
右边界：无；
/* border-radius:10px 0px 0px 0px；*/
}
#tab ul li:最后一个孩子{
左边界：无；
/* border-radius:0px 10px 0px 0px；*/
}
#选项卡ul .活动{
背景色：橙色；
颜色：白色；
}
#tab div{
宽度：415像素
位置：绝对；
top:32px；
显示：无；
}
#tab div img{
宽度：350像素
/* border-radius:0px 0px 10px 10px；*/
}
#tab分区当前{
显示：块；
}
/风格
身体
div id=tab
保险商实验所
Li v-on:mouse over= change(index):class=[当前索引==index？活动“:”]”:列表" {item.text}}/li中的key=item.idv-for=(项目，索引)
/ul
div:class=[当前索引==索引？当前： ] v-for=(项目，索引)在列表中
img:key= item。id v-bind:src= item。img src /
/div
/div
/body
脚本类型=文本/javascript
var vm=new Vue({
el:#tab ，
数据：{
当前索引：“0”，//当前选项卡的索引
列表：[{
id:“1”，
文字："苹果",
imgsrc:imgs/1.jpg
},{
id:“2”，
文本："橙色",
imgsrc:imgs/2.jpg
},{
id:“3”，
文本："柠檬",
imgsrc:imgs/3.jpg
}]
},
方法：{
变化：功能（索引){
this.currentindex=索引
}
}
});
/脚本
/html
效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。