Vue:v-for的使用，列表的循環，對象的循環，數據改變，set的使用

原創

2020-02-20 16:47

v-for循環列表
其中item爲內容，index爲下標
注意這裏的key爲唯一值，儘量不使用index

<div id="app">
			<div v-for="(item, index) of list" :key="item.id">
				{{item.text}} ---- {{index}}
			</div>
		</div>
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					list: [
						{
						id:"0001",
						text:"min"
					},
					{
						id:"0002",
						text:"box"
					},
					{
						id:"0003",
						text:"xiaode"
					}]
				},
			})
		</script>

效果

若想改變數組中的內容不能直接通過改變下標的方式，這樣數組中的內容雖然改變了，但是頁面中的內容不會跟着改變，這個時候應該使用vue提供的一些方法 push pop shift unshift splic sort reverse，或者通過改變list的引用，和set方法

使用template佔位符進行多個循環這樣外層的div塊就不會顯示出來
html

<div id="app">
			<template v-for="(item, index) of list" :key="item.id">
				<div >
					{{item.text}} ---- {{index}}
				</div>
				<span>
					{{item.text}}
				</span>
			</template>
		</div>

v-for循環對象
其中item爲值，key鍵，index爲下標

<div id="app">
			<div v-for="(item, key, index) of userInfo">
				{{item}} --- {{key}} --- {{index}}
			</div>
		</div>
		
		<script>
			//push pop shift unshift splic sort reverse
			var app = new Vue({
				el:"#app",
				data:{
					userInfo:{
						name:"Min",
						age: 18,
						gender: "boy",
					}
				},
			})
		</script>

若要通過命令的方式直接修改對象中的值，這樣頁面不會隨之而改變，可以修改該對象的引用，或者使用vue的set方法