Vue2tab切换选项卡的方法

来源：宝玛科技网

这次给大家带来Vue2 tab切换选项卡的方法，使用Vue2 tab切换选项卡的注意事项有哪些，下面就是实战案例，一起来看一下。

最近在学习Vue,看是案例后随便做一个实践,一遍加深理解;这种简单又能实现效果的比较能够接受;

html:结构很简单:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8" />
 <title>components</title>
 <script src="vue.js"></script>
 <style type="text/css">
 span{
 background:#ccc;
 padding:2px 5px;
 line-height:30px;
 text-align:center;
 cursor:pointer;
 }
 span.active{
 color:#fff;
 background:green;
 }
 </style>
</head>
<body>
 <div id="app">
 <component :is="who"></component>
 <span :class="{active:active[key]}" v-for="(item,key) in tab" @click="change(key)">{{item.content}} :{{key}}</span>
 </div>
</body>
</html>

js代码:

<script type="text/javascript">
 var tem1 = {
 template: "<div>我是components_A组件</div>",
 };
 var tem2 = {
 template: "<div>我是components_B组件</div>",
 };
 var tem3 = {
 template: "<div>我是components_C组件</div>",
 };
 var vue1 = new Vue({
 el: "#app",
 data: {
 who: "com1",　　　　　　　　　　//默认第一次显示;
 active: [true, false, false],//统一管理状态;
 tab: [{
 "content": "tab1",　　　　//tab-span
 "func": "com1" //仅仅用来存放组件;
 }, {
 "content": "tab2",
 "func": "com2"
 }, {
 "content": "tab3",
 "func": "com3"
 }]
 },
 updated: function() {
 // this.who=null;
 },
 methods: {
 change:function(x){
 
 for(var i=0;i<this.active.length;i++){
 this.active[i]=false;
 this.active[x]=true;
 this.who=this.tab[x].func;
 }
 console.log(this.active);
 // console.log(x);
 this.$set(this.active, 3, 0);
 }
 },
 components: {
 "com1": tem1,
 "com2": tem2,
 "com3": tem3
 }
 })</script>

之前也是做了一个例子代码比较凌乱,这个用v-for做简化了;

要点之一: 不要忘记 v-for的遍历顺序值-键;

要点之二: 关于全局API Vue.set();的使用; 应该在change方法中的循环之后用 this.$set调用;

　　　　这里使用了一个小技巧就是关于active状态的值在改变后如何更新呢,

　　　　在其中后面加入一项,这一项并没有什么意义,而仅仅是调用$set方法让Vue知道;

要点之三: 关于component组件 is:who 如何引用到呢;把它发到被v-for遍历的一个 func属性中;这样就方便了;

　　　　事实上在data下再写一个变量来存放 com1 com2 com3 是不会生效的;

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！