浅谈浅谈vue.js中中v-for循环渲染循环渲染
这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。
一、简介一、简介
vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后渲染出相应的内容。它
可以遍历数组类型以及对象类型的数据，js 里面的数组本身实质上也是对象，这里遍历数组和对象的时候，方式相似但又稍有
不同。
（一）遍历对象（一）遍历对象
<div id="app">
<ul>
<li v-for="(val, key, index) in me">{{index}}. {{key}}: {{val}}</li>
</ul>
</div>
...
var vm = new Vue({
el: '#app',
data: {
me: {
name: 'Dale',
age: 22,
sex: 'male',
height: 170
}
}
});
这里，v-for 接收的参数相对较复杂，但是可以分为三个部分：
（（1）括号及其内的遍历结果信息（）括号及其内的遍历结果信息（val, key, index））
其中，val 是遍历得到的属性值，key 是遍历得到的属性名，index 是遍历次序，这里的 key/index 都是可选参数，如果不需
要，这个指令其实可以写成 v-for=”val in me”；
（（2）遍历关键词）遍历关键词 in
in 可以使用 of 替代，官方的说法是“它是最接近 JavaScript 迭代器的语法”，但其实使用上并没有任何区别；
（（3）被遍历对象）被遍历对象 me
me 是绑定在实例 data属性上的一个属性，实际上，它是有一个执行环境的，也即是我们接触最多的 vue 实例，模板中，我们
仍旧可以像在 methods 以及计算属性中一样，通过 this 访问到它，这里的 me 其实就相当于 this.me，模板中直接写 this.me
也是可行的。
渲染结果如下：
<div id="app">
<ul>
<li>0. name: Dale</li>
<li>1. age: 22</li>
<li>2. sex: male</li>
<li>3. height: 170</li>
</ul>
</div>
（二）遍历数组（二）遍历数组
<div id="app">
<ul>
<li v-for="(item, index) in items">{{index}}. {{item}}</li>
</ul>
</div>
...
var vm = new Vue({
el: '#app',
data: {
items: ['apple', 'tomato', 'banana', 'watermelon'] }
});
和遍历对象相类似，最大的不同点在于对象的 “key” 和 “index” 是一致的，所以这里我们只需要取一个 index 即可，上面代码
资源评论
