Vue指令03

v-for

<div id="app">
	<!-- <p>{{ list[0] }}</p> -->
	<!--遍历数组-->
	<p v-for="item in list">{{ item }}</p>
	<p v-for="(item, i) in list">索引是：{{ i }}---------{{ item }}</p>
	<!--循环对象数组-->
	<p v-for="user in list2 ">{{ user.id }}---{{ user.name }}</p>
	<!--遍历对象-->
	<!--在遍历对象身上的键值对，可以有索引-->
	<p v-for="(val, key) in user">值是{{ val }}----{{ key }}</p>
	<p v-for="(val, key, i) in user">值是{{ val }}----{{ key }}------索引值：{{ i }}</p>
	<!--迭代数据，从1开始-->
	<p v-for="count in 10">这是第{{ count }}次循环</p>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			list: [1,2,3,4,5,6],
			list2: [
				{id: 1, name: 'zs1'},
				{id: 2, name: 'zs2'},
				{id: 3, name: 'zs3'},
				{id: 4, name: 'zs4'}
			],
			user: {
				id: 1,
				name: '托尼',
				gender: '男'
			}
		},
		methods: {

		} 
	});
</script>	

注意事项：
        2.2.0+版本里，挡在组件中使用v-for时，key是必须的

<div id="app">
	<div>
		<label>Id:
			<input type="text" v-model="id">
		</label>
		<label>Name:
			<input type="text" v-model="name">
		</label>
		<input type="button" value="添加" @click="add">
	</div>
	<!--使用注意事项，绑定对应的key-->
	<!--v-for循环的时候，属性key只能是string或者number， 必须使用v-bind绑定key 的值-->
	<!--在组件中使用v-for循环的时候，或者一些特殊情况中，必须使用key-->
	<p v-for="user in list2 " :key="use.id">
		<input type="checkbox" />
		{{ user.id }}---{{ user.name }}
	</p>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			id: '',
			name: '',
			list2: [
				{id: 1, name: 'zs1'},
				{id: 2, name: 'zs2'},
				{id: 3, name: 'zs3'},
				{id: 4, name: 'zs4'}
			]
		},
		methods: {
			add(){//添加方法
				this.list.push({id: this.id, name: this.name});
			}
		} 
	});
</script>

v-if和v-show

<div id="app">
	<!-- <input type="button" @click="toggle" value="toggle"> -->
	<input type="button" @click="flag" value="toggle">
	<!--v-if 每次都会重新删除或者创建元素  有较高的切换性能消耗-->
	<h3 v-if="flag">这是v-if控制的元素</h3>
	<!--v-show每次不会进行删除或者创建元素，每次只是操作display样式-->
	<!--v-show 有较高的初始渲染消耗,如果元素频繁切换，最好不要使用v-if-->
	<!--如果元素可能永远都不会被显示出来，那么不推荐使用v-show-->
	<h3 v-show="flag">这是v-show控制的元素</h3>
</div>	

以上是此次知识点的总结。