Vue.js 从零开始：v-for

`v-for` 列表渲染

透过v-for指令，将资料里的阵列或是物件重复渲染在画面上。

`遍历物件资料`：

<div id="app">
  <ul>
    <li v-for="(items, key, index) in item">
      {{ items }}:{{ key }}:{{ index }}
    </li>
  </ul>
</div>

const vm = Vue.createApp({
  data() {
    return {
      item: {
        one: 1,
        two: 2,
        three: 3,
      }
    }
  }
}).mount('#app');

迭代物件中的元素，第二个参数key是键值，第三个参数index是索引值。

`遍历阵列资料`：

<div id="app">
  <ul>
    <li v-for="(item, index) in arr"> 
      {{ item.name }} - {{ index }} - {{ item.id }}
    </li>
  </ul>
</div>

const vm = Vue.createApp({
  data() {
    return {
      arr: [
        { name: "one" ,id: "1"}, 
        { name: "two" ,id: "2"}, 
        { name: "three" ,id: "3"}
      ]
    };
  }
}).mount("#app");

迭代阵列中的元素，第二个参数index是键值。可以使用item.name点的运算子，带出属性name。

`v-for` 筛选

<div id="app">
  <ul>
    <li v-for="item in filterNum">{{ item }}</li>
  </ul>
</div>

const vm = Vue.createApp({
  data() {
    return {
      num: [1,2,3,4,5,6,7,8]
    }
  },
  computed: {
    filterNum() {
      return this.num.filter(function(itemNum){ 
        return itemNum % 2 === 0
      });
    }
  }
}).mount('#app');

arrow function:

const vm = Vue.createApp({
  data() {
    return {
      num: [1,2,3,4,5,6,7,8]
    }
  },
  computed: {
    filterNum() {
      return this.num.filter(itemNum => 
        itemNum % 2 === 0
      );
    }
  }
}).mount('#app');

大括弧拿掉，箭头函式能自带return。

为什麽`v-for`一定要加`:key`?

相同父元素的子元素都必须有独特的key值，重复的key会造成画面渲染错误。

未绑定:key版本：

<div id="app">
  <ul>
    <li v-for="(item, index) in products">{{ index }} - {{ item.name }} - {{ item.price}}
      <input type="text">
    </li>
  </ul>
  <button type="button" @click="reverseArray">反转</button>
</div>

const vm = Vue.createApp({
  data() {
    return {
      products: [
        {
          name: '上衣',
          price: 500
        },
        {
          name: '裤子',
          price: 1000
        },
        {
          name: '鞋子',
          price: 2000
        },
                {
          name: '帽子',
          price: 2000
        },
      ]
    }
  },
  methods: {
    reverseArray() {
      this.products.reverse();
    }
  }
}).mount('#app');

在第一个input输入数字1234: