vue 列表渲染

数组循环 渲染

v-for 命名用于列表渲染，最简单的一个例子：

	<div id="app">
		<div v-for="(item,index) of onelist">
			{{item}} ------ {{index}}
		</div>
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data:{
				onelist: [
				"hello",
				"nice",
				'to',
				'meet',
				'you']
			}
		})

给渲染元素一个唯一的key 值(可提高性能，性能优时key 值唯一，且不要让index做key 值)，下面为代码：

	<div id="app">
		<div v-for="(item,index) of onelist" :key="item.id">
			{{item.text}} ------ {{index}}
		</div>
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data:{
				onelist: [{
					id: "010101020304",
					text: "hello"
				},{
					id: "0202020304",
					text: "ok"
				},{
					id: "0303030405",
					text: "yes"
				}
				]
			}
		})
	</script>

当对数组操作时，并不是所有的修改数组操作 vue 都能与渲染的dom 响应，只有下面几个数组的操作是可以响应的：

push, pop, shift, unshift, splice, sort, reverse.

当然，不想通过上面方法操作数组，也有一种方法，可以响应数组改变，就是改变数组变量的引用地址，app.onelist = [{...},{...}]即可。

 

对象循环 渲染

使用如下：

	<div id="app">
		<div v-for="(item,index) of onelist" :key="item.id">
			{{item.text}} ------ {{index}}
		</div>
		<div v-for="item of oneobject">
			{{item}}
		</div>
		<div v-for="(item,key) of oneobject">
			{{item}} --- {{key}}
		</div>
		<div v-for="(item,key,index) of oneobject">
			{{item}} --- {{key}} --- {{index}}
		</div>
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data:{
				onelist: [{
					id: "010101020304",
					text: "hello"
				},{
					id: "0202020304",
					text: "ok"
				},{
					id: "0303030405",
					text: "yes"
				}
				],
				oneobject: {
					name: "Tom",
					age: 18,
					gender: "male"
				}
			}
		})
	</script>

如果想修改值，仅赋值修改即可（响应），若增加（删除）则需要更改引用才能响应。