vue学习笔记（一）--Tab切换

最近在学Vue，写的第一个demo是Tab,刚开始还直接把js代码贴过来改，没觉得有什么不同。然后请教别人说，用Vue最好不要操作dom啦，又把代码做了修改-_-。

html代码如下：

<div id="tab">
<ul>
<li @click="toggle(index,list.conent)" :class="{active:active==index}" v-for="(list,index) in lists">{{list.type}}</li>
</ul>
<component :is="currentView"></component>
</div>

js代码如下：
<script type="text/javascript">
Vue.component("Tab1",{
template:"<p>this is Tab1</p>"
})
Vue.component("Tab2",{
template:"<p>this is Tab2</p>"
})
new Vue({
el:"#tab",
data:{
active:0,
currentView:"Tab1",
lists:[
{type:"tab1",conent:"Tab1"},
{type:"tab2",conent:"Tab2"}
]
},
methods:{
toggle(i,v){
this.active = i;
this.currentView = v;
}
}
})