编写 Vue v-for 循环更优雅的 方式

1.使用computed属性或方法代替v-for,v-if的联合使用

在模板中进行迭代之前过滤数据,迭代方法两种

1)使用computed属性

// computed属性遍历在售的产品
computed: {
      productsOnSale: function () {
        return this.products.filter(product => product.onSale)
      }
    }

使用computed属性的好处 :

  1. 数据属性只会在依赖项发生变化时重新评估

  2. 模板只遍历在售的产品,而不是每一个产品

使用过滤方法的不足:

使用方法会改变访问模板内值的方式

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>

上一篇:Vue笔记(三):计算属性(computed)


下一篇:vue面试问题