VUE循环语句的使用(v-for)_vue中for 循环key作用

对数组进行遍历

使用v-for进行遍历时注意参数格式，以“site in sites”的格式填入参数，sites是被遍历的数据，site是遍历出的值。

<template>
  <div id="app">
	  <div v-for="site in sites">
	        {{ site }}
	      </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
	  return {
		  sites:[2,2,5,7,4]
	  }
  }
}
</script>

展现结果

遍历对象参数

v-for遍历对象的参数时，第一个参数是参数值。

<template>
  <div id="app">
	  <div v-for="value in object">
	        {{ value }}
	      </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
	  return {
		  object: {
		            name: '李磊',
		            gen: '男',
		            achievement: 100
		          }
	  }
  }
}
</script>

展现结果

第二个参数是参数的名称（键名），用“,”连接

<template>
  <div id="app">
	  <div v-for="value,key in object">
	       {{key}}: {{ value }}
	      </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
	  return {
		  object: {
		            name: '李磊',
		            gen: '男',
		            achievement: 100
		          }
	  }
  }
}
</script>

展现结果

第三个参数是索引

<template>
  <div id="app">
	  <div v-for="value,key,index in object">
	      {{index }}. {{key}}: {{ value }}
	      </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
	  return {
		  object: {
		            name: '李磊',
		            gen: '男',
		            achievement: 100
		          }
	  }
  }
}
</script>

展现结果

迭代整数

v-for 可以循环整数

<template>
  <div id="app">
	  <div v-for="value in 10">
	       {{ value }}
	      </div>
  </div>
</template>

展现结果