js点击切换选项卡,vue组件切换
本文主要详细介绍vue.js的tab切换功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
因为前端课要交一个大作业，又正好工作室项目需要后端管理接口，所以自学了vue。今天，我做了一个标签开关。第一个是用js做的菜鸡，太难了，T.T，后来学了bootstrap，直接用组件。今天用起来感觉太棒了！比bootstrap的组件更好！
一、实现原理
我用click事件改变数据的值，v-if指令根据数据的变化显示/隐藏内容。
1.设置一个内容数组来存储六个选项的内容是否显示的布尔值。默认情况下，显示第一个。
新Vue({
艾尔：。正文，
数据：{
甲：123，
内容：[真、假、假、假、假、假]
}
}
2.在选项内容中使用v-if指令。
div class=main-content h-100
div v-show= content[0] class= h-100 BG-warning id= item-user
用户中心
div v-show= content[1] class= h-100 id=
内容管理
/div
div v-show= content[2] class= h-100 id=
消息推送
/div
div v-show= content[3] class= h-100 id=
统计数字
/div
div v-show= content[4] class= h-100 id=
奔跑
/div
div v-show= content[5] class= h-100 id=
后台管理帐户，权限
/div
/div
3.在方法中编写一个点击事件。根据事件的参数，将相应位置的内容值设置为true，其他设置为false。
这里有一个错误，直接赋值会失效，因为data中的数组不能直接用下标改变数组中的数据，所以要用这个。$ set (this.arr，index，new val)；方法，或者直接分配一个新数组。
新Vue({
艾尔：。正文，
数据：{
甲：123，
内容：[真、假、假、假、假、假]
},
方法：{
switchItem:函数(项目){
console.log(项目)
for(设I=0；i6；i ) {
if(i==item){
这个。$set(this.content，I，true)；
}否则{
这个。$set(this.content，I，false)；
}
}
}
}
})
4.选项绑定单击事件
ul class=list-unstyled left-ul
Li class= BG-warning nav-item a @ click= switch item(0) href= # person 用户中心/a/li
Li class= BG-info a @ click= switch item(1) href= # content 内容管理/a/li
Li class= BG-dark a @ click= switch item(2) href= # notification 消息推送/a/li
Li class= BG-success a @ click= switch item(3) href= # data 统计数据/a/li
Li class= BG-warning a @ click= switch item(4) href= # operate 操作/a/li
Li class= BG-info a @ click= switch item(5) href= # system 系统设定/a/li
/ul
二、实现效果
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。