vue.js实现选项卡切换 vue.js实现选项卡切换

因为前端课要交一个大作业，刚好工作室的项目需要一个后台管理界面，就自学了一下vue，今天做了一个选项卡切换，最开始的作为菜鸡是用的js做的，太难了T.T，后面学了bootstrap就直接用的组件。今天用了感觉太棒了！比bootstrap的组件好用！！！
一、实现原理我是用的点击事件进行更改data数据的值，v-if指令根据数据的变化来显示/隐藏内容的
1、设置1个content数组，用来存储6个选项内容是否显示的boolean值，默认第一个显示

new Vue({el:".body",data:{a:123,content:[true,false,false,false,false,false]}}

2、在选项内容中使用v-if指令

用户中心内容管理消息推送数据统计运营后台管理账户，权限

3、在methods中写一个点击事件，根据事件的参数，把相应位置的content值为true，其他置为false
这里遇到一个错误，直接赋值会无效，因为data中的数组不能够通过下标直接更改数组中的数据，要通过this.$set(this.arr,index,newVal); 方法来设置，或者直接赋值新数组

new Vue({el:".body",data:{a:123,content:[true,false,false,false,false,false]},methods:{switchItem:function (item) {console.log(item)for (let i = 0; i <6; i++) {if(i==item){this.$set(this.content,i,true); } else{this.$set(this.content,i,false); }}}} })

4、选项绑定点击事件