這次帶給大家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 是不會生效的;
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
#以上是Vue2 tab切換選項卡的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！