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

本篇内容主要讲解"vue.js怎么实现选项卡切换"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"vue.js怎么实现选项卡切换"吧!

一、实现原理

我是用的点击事件进行更改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、选项绑定点击事件

  
用户中心
  
内容管理
  
消息推送
  
数据统计
  
运营
  
系统设置

二、实现效果

到此，相信大家对"vue.js怎么实现选项卡切换"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！