vue v-for 渲染如何绑定数据

Question

各位大佬好，问题如下:我用v-for渲染了一个列表，列表内有4个子元素，每次只显示一个data中有一个currentIndex,请问怎么用currentIndex控制元素的显示和隐藏呢。。代码如下进度：{{currentAnIndex}}/5{{value.question}}{{seleItem}}exportdefault{name:'question',props:{questionData:{type:[Object,Array],},},data(){return{currentAnIndex:1,//当前问题索引anStatus:{'item_right':false,'item_error':false,},answered:false,//是否答题}},computed:{},methods:{usrTouch(seleItem,e){if(this.questionData[this.currentAnIndex].answer==seleItem){//回答正确e.srcElement.className+='item_right';}else{//回答正确e.srcElement.className+='item_error';}}}}谢谢各位

Answer 1

在v-for的时候你可以获取到索引index，例如题中如果数组长度是4，则index一次是0,1,2,3，那么你可以定义一个变量，例如current：0，在v-for后面跟v-if="index==current"，那么默认只会显示第1条数据，你去改变这个current（0-3，超出就显示为空了），列表就变了。