vue.js 列表渲染 v-for（十）

列表渲染：

把一个数组对应为一组元素
我门可以用v-for指令基于一个数组来渲染一个列表，v-for指令需要使用 item in items形式的特殊语法，其中item 是原数组中的一个元素，items是原数组。

v-for 可遍历一个数组，也可遍历一个对象的所有属性。

<div id="app">
	<ul>
		<li v-for="item,index in items" :key="index">   //index 表示当前数组索引， :key 绑定标签的key属性
		{{index}}{{ item.message }}
		</li>
	</ul>
	<ul>
		<li v-for="value, key in object">
			{{key}} : {{ value }}
		</li>
	</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		items:[
			{message:'one'},
			{message: 'two'}
		],
		object:{
			title:'标题',
			author:'作者',
			publisher:'出版社'
		}
	}
});
</script>

vue 官网尽可能提供标签的 :key 属性,具体坑等实际开发再看。

v-if 与 v-for 不推荐一起使用，正常编程逻辑应该是层级关系：

<div v-for="item, index in items" :key="index"> 
	<div v-if="item.available" > </div>
</div>