vue实现滑动切换选项卡,vue实现卡片自适应
这篇文章主要为大家详细介绍了某视频剪辑软件实现选项卡案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现选项卡案例的具体代码，供大家参考，具体内容如下
实现步骤
实现静态用户界面效果
用传统的方式实现标签结构和样式基于数据重构用户界面效果
将静态的结构和样式重构为基于某视频剪辑软件模板语法的形式处理事件绑定和射流研究…控制逻辑声明式编程
模板的结构和最终显示的效果基本一致我们先把每组数据作为对象存储在数组中
列表：[{
id: 1，
标题："苹果",
路径："图像/苹果 jpg
}, {
id: 2，
标题："橙色",
路径："图像/橘子 jpg
}, {
id: 3，
标题："柠檬",
路径："图像/柠檬 jpg
}]
然后通过迭代对这个数组进行遍历，取到对应的标题值
李：列表" {item.title} "中的key=item.id v-for=(item，index)}/Li
对图片也进行遍历
div :key=item.id v-for=(item，index) in list
img src=item.path
/div
具体代码如下
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
风格。选项卡ul {
溢出：隐藏；
填充：0;
边距：0;
}。标签ul li {
框大小：边框-框；
填充：0;
浮动：左；
宽度：100像素
高度：45像素
行高：45像素
列表样式：无；
文本对齐：居中；
边框-顶部：1px纯蓝；
右边框：1px纯蓝；
边框-底部：1px纯蓝；
光标：指针；
}。选项卡ul li:第一个孩子{
边框-左侧：1px纯蓝；
}。选项卡ul li.active {
背景色：橙色；
}。选项卡分区{
宽度：500像素
高度：300像素
显示：无；
文本对齐：居中；
字体样式：30px
行高：300像素；
边框：1px纯蓝；
border-top:0px；
}。选项卡分区当前{
边距-顶部：0px
宽度：300像素
高度：300像素
显示：块；
}
img {
宽度：300像素
高度：300像素
}
/风格
/头
身体
div id=应用程序
div class=tab
保险商实验所
Li v-on:click= change(index):class= current index==index？列表" {item.title}}/li中的活动“:”:key=“item。id v-for=(项目，索引)
/ul
div :class=currentIndex==index？当前： :key=item.id v-for=(item，index) in list
img :src=item.path
/div
差异
img src=images/柠檬 jpg
/div
/div
/div
脚本类型= text/JavaScript src= js/vue。js /脚本
脚本类型=文本/javascript
var vm=new Vue({
埃尔： #app ，
/*数据*/
数据：{
当前索引：0,
/*当前索引*/
列表：[{
id: 1，
标题："苹果",
路径："图像/苹果 jpg
}, {
id: 2，
标题："橙色",
路径："图像/橘子 jpg
}, {
id: 3，
标题："柠檬",
路径："图像/柠檬 jpg
}]
},
/*js控制逻辑*/
方法：{
//在这里实现选项卡切换操作：本质就是操作类名
//如何操作类名？就是通过当前值的索引
变化：功能（索引){
this.currentIndex=索引
}
}
})
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。