编写 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>