vue卡片组件按钮设置,vue实现卡片自适应
这篇文章主要为大家详细介绍了某视频剪辑软件实现简单选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现简单选项卡效果的具体代码，供大家参考，具体内容如下
效果图
1.头部选项卡
点击切换下标身份传递一个参数回去，活动绑定选中样式
div id=应用程序
保险商实验所
列表@click=check(index)中的li v-for=(item，index):class= { active:index===TabId }
h1 {{item.title}}/h1
/李
/ul
/div
2.完整HTML
默认使用虚拟展示来切换，获取盒子下标，没有数字正射影像图操作
当然，Vue官方文档也不推荐控制显示和迭代同时使用
div id=应用程序
保险商实验所
列表@click=check(index)中的li v-for=(item，index):class= { active:index===TabId }
h1 {{item.title}}/h1
/李
/ul
列表v-show=index===TabId 中的div class=我的内容 v-for=(项目，索引)
h1{{item.content}}/h1
/div
/div
3.Vue
下标默认为0
脚本
//清除默认提示样式
Vue.config.devtools=false
Vue.config.productionTip=false
让vm=新Vue({
埃尔： #app ，
data() {
返回{
//下标身份默认从零开始
TabId: 0，
列表：[
{
标题："鼬",
内容：“VUE”
},
{
标题："佐助",
内容：" HTML "
},
{
标题："奥比托",
内容：" CSS "
},
{
标题："斑",
内容：" JavaScript "
},
]
}
},
方法：{
//将点击事件获取的下标身份传递给要切换的盒子
检查（索引){
这个TabId=index
},
}
});
/脚本
4.完整代码
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题文档/标题
脚本src= https://cdn。bootcdn。net/Ajax/libs/vue/2。6 .12/vue。js /脚本
/头
风格
* {
边距：0;
填充：0;
列表样式：无；
}
#app ul {
宽度：800像素
背景：黑色；
不透明度：9;
边距：100像素自动；
显示器：flex
justify-content:space-between；
}
#应用程序李{
宽度：300像素
文本对齐：居中；
光标：指针；
颜色：# fff
}
#应用程序李：悬停{
光标：指针；
}
#app li.active {
背景：# 03a9f4
}。我的内容{
宽度：800像素
高度：500像素
边距：0自动；
背景：# 03a9f4
不透明度：8;
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
}
/风格
身体
div id=应用程序
保险商实验所
列表@click=check(index)中的li v-for=(item，index):class= { active:index===TabId }
h1 {{item.title}}/h1
/李
/ul
列表v-show=index===TabId 中的div class=我的内容 v-for=(项目，索引)
h1{{item.content}}/h1
/div
/div
脚本
//清除默认提示样式
Vue.config.devtools=false
Vue.config.productionTip=false
让vm=新Vue({
埃尔： #app ，
data() {
返回{
//下标身份默认从零开始
TabId: 0，
列表：[
{
标题："鼬",
内容：“VUE”
},
{
标题："佐助",
内容：" HTML "
},
{
标题："奥比托",
内容：" CSS "
},
{
标题："斑",
内容：" JavaScript "
},
]
}
},
方法：{
//将点击事件获取的下标身份传递给要切换的盒子
检查（索引){
这个。TabId=index
},
}
});
/脚本
/body
/html
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。