Vue选项卡,vue组件使用方法
这篇文章主要为大家详细介绍了某视频剪辑软件选项卡组件的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件选项卡组件的实现代码，供大家参考，具体内容如下
主要功能：点击不同的选项，显示不同的内容
超文本标记语言
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
标题/标题
link rel=样式表 type= text/CSS href= CSS/style。CSS /
脚本src= js/jquery。js type= text/JavaScript charset= utf-8 /script
脚本src= js/vue。js type= text/JavaScript charset= utf-8 /script
脚本类型=文本/javascript
$(文档)。ready(function(){
var应用=新Vue({
埃尔： #app ，
数据：{
活动键：“1”//被选择的选项
}
});
});
/脚本
/头
身体
div id= app v-斗篷
tabs v-model=activeKey
窗格标签=一name=1 我是张三/窗格
窗格标签=二name=2 我是李四/窗格
窗格标签=三name=3 我是牛五/窗格
/选项卡
/div
脚本src= js/pane。js type= text/JavaScript charset= utf-8 /script
脚本src= js/tabs。js type= text/JavaScript charset= utf-8 /script
/body
/html
pane.js
Vue.component(窗格,{
名称："窗格",
模板："\
div class=pane v-show=show \
插槽/插槽\
/div ，
数据：函数(){
返回{
显示：真实
}
},
道具：{
名称：{
类型：字符串
},
标签:{
类型：字符串，
默认值：""
}
},
方法：{
updateNav() {
这个$家长。更新nav()；
}
},
观察：{
标签(){
这个。更新nav()；
}
},
已安装(){
这个。更新nav()；
}
})
tabs.js
Vue.component(标签,{
模板："\
div class=tabs\
div class= tab-bar \
div \
:class=tabCls(item) \
导航列表中的v-for=(item，index) \
@click=handleChange(index) \
{{item.label}} \
/div\
/div \
div class=制表符-内容\
插槽/插槽\
/div \
/div ，
道具：{
值：{
类型：[字符串，数字]
}
},
数据：函数(){
返回{
当前值：这个值，
导航列表：[]
}
},
方法：{
标签:函数（项目){
返回[
制表符-制表符，
{
标签-标签-活动:项目。name===这个。现值
}
]
},
//遍历所有为窗片的子元素
getTabs(){
归还这个children.filter(函数（项目){
退货项目. $ options.name===窗格
});
},
//将窗片子元素中标签名称放进导航列表数组
updateNav() {
这个。navlist=[]；
var _ this=this
this.getTabs().forEach(函数（窗格，索引){
_this.navList.push({
标签:pane.label，
名称：pane.name index
});
如果(!窗格。名称)窗格。名称=索引；
if(index===0){
如果(!_this.currentValue){
_这个。当前值=窗格。名称 索引；
}
}
});
这个。updatestatus()；
},
updateStatus(){
var tabs=this。gettabs()；
var _ this=this
//显示当前正在选中的
tabs.forEach(function(tab){
返回标签。show=tab。name===_ this。当前值；
})
},
手柄变化：函数（索引){
var nav=this。导航列表[索引]；
var name=nav.name
this.currentValue=name
这个. emit(input ，name)；
这个$emit(点击，名称);
}
},
观察：{
值：函数（值){
this.currentValue=val
},
当前值：函数(){
这个。updatestatus()；
}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。