1.使用computed属性或方法代替v-for,v-if的联合使用
在模板中进行迭代之前过滤数据,迭代方法两种
1)使用computed
属性
// computed属性遍历在售的产品
computed: {
productsOnSale: function () {
return this.products.filter(product => product.onSale)
}
}
使用computed属性的好处 :
-
数据属性只会在依赖项发生变化时重新评估
-
模板只遍历在售的产品,而不是每一个产品
使用过滤方法的不足:
使用方法会改变访问模板内值的方式
2.在循环外包一层元素---移动v-if到v-for循环元素的外面
具体写法
<ul v-if='isLoggedIn'> <!-- Much better -->
<li
v-for='product in products'
:key='product._id'
>
{{ product.name }}
</li>
</ul>
3.访问循环中的索引
<ul>
<li v-for='(products, index) in products' :key='product._id' >
Product #{{ index }}: {{ product.name }}
</li>
</ul>
4.迭代对象
迭代对象的键值对
如果我们添加另一个参数,则将获得项和键。如果我们添加第三个参数,则还可以访问v-for
循环的索引。
<ul>
<li v-for='(products, index) in products' :key='product._id' >
<span v-for='(item, key, index) in product' :key='key'>
{{ item }}
</span>
</li>
</ul>