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;
}
}
})

上一篇:Catalan 数列的性质及其应用(转载)


下一篇:Swift - 给图片添加文字水印(图片上写文字,并可设置位置和样式)