vue卡片组件按钮设置,vue实现滑动切换选项卡
这篇文章主要为大家详细介绍了某视频剪辑软件实现经典选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现经典选项卡的具体代码，供大家参考，具体内容如下
选项卡方法：1.某视频剪辑软件方法选项卡2.事件委托方法性能好点
2大经典选项卡思路：
1.3个里控制一个div，每次点击里都控制差异里面的内容发生变化
2.3个里控制3个差异显示隐藏`
！声明文档类型
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
标题文档/标题
风格
*{
边距：0;
填充：0;
}。tabBox{
框大小：边框-框；
/* 元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度；*/
边距：20px自动；
/* 上下边距为20px，左右自动，也是居中显示。 */
宽度：600像素
}。tabBox .选项卡{
显示器：flex
位置：相对；
top:1px；
}。tabBox .标签李{
列表样式：无；
右边距：10px
填充：0 20像素
行高：35px
边框：1px纯色# AAA
背景：# EEE；
光标：指针；
}。tabBox .标签李.主动{
背景：# FFF；
边框-底部-颜色：# FFF；
}。tabBox .内容{
/*显示：无；*/
高度：300像素
边框：1px纯色浅蓝色；
填充：10px
}
/* .tabBox .content.active{ .
显示：块；
}
*/
/风格
/头
身体
！-
选项卡方法：
1.某视频剪辑软件方法选项卡
2.事件委托方法性能好点
2大经典选项卡思路：
1.3个里控制一个div，每次点击里都控制差异里面的内容发生变化
2.3个里控制3个差异显示隐藏
-
div id=应用程序
div class=tabBox
！-获得事件源，判断事件源，事件委托绑定给里的父级元素-
ul class=tab
！- @click=handle($event) -
tob v-html= item中的li v-for=(item，index)。 name :class= { active:index===curIndex } @ click= handle($ event，index，item.id)/li
！-@ click= curIndex=index /李
里自定义方法：index=index/li
里纪录片/李-
/ul
内容v-html=内容/div
！- v-for=(item，index)在tob v-html= item中。 children :class= { content:true，active:index===curIndex} -
！- div class=content 动漫内容/div
div class=内容纪录片内容/div -
/div
/div
/body
脚本src= node _ modules/vue/dist/vue。量滴js /脚本
脚本src= node _ modules/axios/dist/axios。量滴js /脚本
脚本
让tob=[{
id:1，
名称：音乐，
},
{
id:2，
名称：影视，
},{
id:3，
名称：动漫，
},{
id:4，
名称：纪录片，
}];
让vm=新Vue({
埃尔： #app ，
数据：{
//=选项卡数据要约收购
tob，
//展示选项卡索引
curIndex:0，
//内容区域
内容：,
},
cearted(){
//生命周期函数(vue实例创建成功)
这个。查询数据(tob[this。curindex][ id ])；
},
方法：{
//ev传参事件委托方法
//句柄(电动汽车){
//let target=ev.target，
//tarTag=target。标记名；
//if (tarTag===LI){
//这个。curindex=parse int(target。get属性( index )；
//}
//},
查询数据(curID){
//异步创建交互式、快速动态网页应用的网页开发技术请求
axios.get(data.json ).然后(响应={
返回响应.数据
}).然后（结果={
设项目数据=结果。find(item=parse int(item。id)===parse int(curID))；
console.log(结果);
if (itemDATA) {
这个。内容=项目数据。内容；
返回；
}
回报承诺。reject()；
}).接住(原因={
this.content=没有信息
});
},
句柄(ev，索引，id){
if (this.curIndex===index)返回；
this.curIndex=index
这个。查询数据(id)；
},
}
})
/脚本
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。