04-Vue中v-for相关问题和设计一个简单的tab页面

在使用v-for的时候，可以传两个参数(val,index) in persons，第一个参数时值第二个是索引，在内容里调用{{val}}。

设计一个简单的tab页

template:`

<ul class="tab-title">

<li v-for="(val,index) in tabTitle" @click="cur2=index" :active="{active:cur2==index}">{{val}}</li>

</ul>

<div>

<div v-for="{val,index} in tabContent" v-if="cur2==index">{{val}}</div>

</div>`,

data(){

return{

cur2:0,

tabTitle:["标题一","标题二",'标题三"],

tabContent:["标题一","标题二",'标题三"]

}

}

首先v-for遍历出数组所有的li，再由v-on绑定click事件，将此时的index值传给cur2，再有v-bind绑定class控制active如果cur2==index为true就显示active的css。

下面的tabContent，同样先遍历出数组内的所有li，用v-if或者v-show来控制内容的显示与否，v-if=“cur2==index”，由于tabTitle把click点击的index传给了cur2，所以显示的是click点击的tabContent