Vue从零开始总结6

我们知道v-for是用于遍历的，那么里面的内容就可以看成是数组元素，既然是数组元素，那么它就应该有对应的下标，如：v-for="(item,index) in movies"

这里的item可以理解为变量i，而{{item}}拿的就是对应的内容了

这里的{{index}}就是我们对应的下标

结合我们之前总结的一些动态绑定，在这里我们可以做一个点击事件，根据我们点击的位置，来为元素添加对应的class属性渲染，下面上代码

<li v-for="(item,index) in movies" @click="handle(index)":class="currentIndex==index?'active':''">{{index}}:{{item}}

</li>

data:{

currentIndex:-1

}

methods:{

handle:function(x){

this.currentIndex=x;

}

那么我来讲解一下，首先@click点击事件，把通过遍历获取的index作为实参传递给handle这个函数，也就是说我们把index实参传递给了x这个形参，再把x的值赋给了currentIndex，这样就实现了把view里面的内容传给model，紧接着，我用动态绑定的class决定是否展示active类里的属性，如果说currentIndex==indexd的话我们就执行active，注意这里的类一定要加' '否则无效。这样就实现了model到view的过程，而这两个过程的中间商就是view-model，这也就是我们所说的mvvm