Vue-(v-for循环的使用)

for循环数组、对象数组

<div id="app">
	<!-- v-for循环数组，(item值每一项) -->
	<ul>
		<li v-for="item in list">{{ item }}</li>
	</ul>
	
	<ul>
		<!-- i 是索引 -->
		<li v-for="(item,i) in list">{{ item + '=======' + i}}</li>
	</ul>
	
	<!-- 当list是数字的时候，就是从1循环到这个数 -->
	<p v-for="num in 10">{{ num }}</p>
	
	
	<!-- v-for 循环对象数组 -->
	<ul>
		<li v-for="item in list2">{{item.id + '-------' + item.name}}</li>
	</ul>
	
	<ul>
		<li v-for="(item,i) in list2">{{item.id}} ------ {{item.name}} ----- {{i}}</li>
	</ul>
</div>

var vm = new Vue({
	el: '#app',
	data: {
		list: ['秦始皇', '汉武帝', '唐太宗', '宋太祖'],
		list2:[
			{id: 1, name: '秦始皇'},
			{id: 2, name: '汉武帝'},
			{id: 3, name: '唐太宗'},
			{id: 4, name: '宋太祖'}
		]
	},
	methods: {}
})

for循环对象

<div id="app">
	<ul>
		<!-- item 代表的是值 -->
		<li v-for="item in person">{{ item }}</li>
	</ul>
	
	<ul>
		<!-- key 代表键， i 是索引 -->
		<li v-for="(val, key, i) in person">{{ val }} ------ {{ key }} ----- {{ i }}</li>
	</ul>
</div>

var vm = new Vue({
	el: '#app',
	data: {
		person: {
			id: 1,
			name: '张三',
			age: 20,
			sex: '男'
		}
	},
	methods: {}
})

for循环中:key属性的使用

<div id="app">
	<label>
		Id：<input type="text" v-model="id" />
	</label>
	<label>
		Name：<input type="text" v-model="name" />
	</label>
	<button type="button" @click="add">添加</button>
	
	<ul>
		<!-- :key 指定的值必须具有唯一性（这个标识符代表的内容不能重复） 属性只能是字符串或者数字 -->
		<!-- 涉及到v-for循环，最好给循环的每一项添加:key属性 -->
		<li v-for="item in list" :key="item.id">
			<input type="checkbox" />
			{{item.id}} ------- {{item.name}}
		</li>
	</ul>
</div>

var vm = new Vue({
	el: '#app',
	data: {
		id: '',
		name: '',
		list:[
			{id: 1, name: '秦始皇'},
			{id: 2, name: '汉武帝'},
			{id: 3, name: '唐太宗'},
			{id: 4, name: '宋太祖'},
		]
	},
	methods: {
		add(){
			var newObj = {id: this.id, name: this.name};
			// console.log(this.id);
			// this.list.push(newObj);
			this.list.unshift(newObj);
		}
	}
})