列表渲染:
把一个数组对应为一组元素
我门可以用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>