最近在学习Vue,看是案例后随便做一个实践,一遍加深理解;这种简单又能实现效果的比较能够接受;
html:结构很简单:
<!DOCTYPE html> <html lang="en"> <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 是不会生效的;
以上完全是个人总结,纯属原创`,不足之处大家多多指教;