在使用 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
来源: http://www.bubuko.com/infodetail-3101009.html