v-指令最後一章，就是v-if系列還有v-show，

v-show

和v-if不一樣的地方在接收到false時，會用display:none的方式隱藏。

v-if條件渲染

除了像前面範例中有控制元素出現的功能外，他還可搭配v-else-if和v-else來做其他的控制。

<div id="app">
    <p>count: {{count}}</p>
    <button v-on:click="count++">add</button>
    <button v-on:click="count=0">reset</button>
    <div class="box" v-if="count===0" style="background-color: blue;">A</div>
    <div class="box" v-else-if="count<5" style="background-color: green;">B</div>
    <div class="box" v-else style="background-color: orange;">B</div>
</div>

const vm = Vue.createApp({
    data() {
        return {
            count: 0
        }
    }
}).mount('#app')

template搭配v-if

同一個v-if要同時操控多個元素時可以用<template>包住，template標籤不會出現在畫面上。

<template v-if="value==='A'">
    <h1>Title</h1>
    <p>Paragraph A</p>
    <p>Paragraph A</p>
</template>
<template v-else>
    <h1>Title</h1>
    <p>Paragraph B</p>
    <p>Paragraph B</p>
</template>

const vm = Vue.createApp({
    data() {
        return {
            value: 'A'
        }
    }
}).mount('#app');

v-for列表渲染

把「陣列」和「物件」印出來在畫面上。

陣列

用法為item in items，item 為每個元素的資料(可任意命名)；items 為原本的陣列資料

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

const vm = Vue.createApp({
  data() {
      return {
          arr: ['A', 'B', 'C', 'D']
      }
  }

也可以在指令中增加index索引值。

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

物件

遍歷物件資料，方法和陣列一樣。可以同時加入key和index。

<div id="app">
    <ul>
        <li v-for="(info,key,index) in student">{{index}}.{{key}}/{{info}}</li>
    </ul>
</div>

const vm = Vue.createApp({
    data() {
        return {
            student: {
                name: 'Bob',
                age: '15',
                gender: 'M'
            }
        }
    }
}).mount('#app');

範圍

v-for="number in 10"可以列出數字1-10，可以用在頁碼上。

<ul>
    <li v-for="info in 5">
        <a href="">{{info}}</a>
    </li>
</ul>

template搭配v-for

和v-if一樣，將需要迴圈的資料包在一起並用<template>包住。

<template v-for="(info,key) in student">
    <li>{{key}} of student</li>
    <li>{{info}}</li>
</template>

排序與過濾資料(filter/sort)

filter過濾資料

number用computed製作出一個新的偶數陣列。

<div v-for="num in evenNum">{{num}}</div>

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

sort排序資料

sort排序出來的資料會改變原本data最初的順序，用...複製一個陣列就不會改變原本的資料。

<ul v-for="num in sortedNum">
    <li>{{num}}</li>
</ul>

const vm = Vue.createApp({
  data() {
      return {
          number: [1, 20, 14, 9, 51, 2, 28, 58, 91, 11]
      }
  },
  computed: {
      sortedNum: function () {
          return [...this.number].sort((a, b) => b - a);
      }
  }
}).mount('#app');

搭配:key唯一值

為了讓渲染更有效率，v-for會重複利用已經存在的元素，簡單的來說，在沒有:key的情況下勾選選項二時，選項三也會被勾起來，因為他替補了選項二的位置，原先的to-do裡面選項二的資料被資料三取代了。

所以必須有唯一值來解決這個問題，讓元素不會重新被利用(如下)。

<div class="box">
  <p>to-do</p>
  <ul>
      <li v-for="item in todoLists" :key="item.id">
          <input type="checkbox" v-model="item.isDone">
          <label for="">{{item.title}}</label>
      </li>
  </ul>
</div>
<div class="box">
  <p>done</p>
  <ul>
      <li v-for="item in doneLists" :key="item.id">
          <input type="checkbox" v-model="item.isDone">
          <label for="">{{item.title}}</label>
      </li>
  </ul>
</div>

const vm = Vue.createApp({
    data() {
        return {
            lists: [
                {
                    id: 'task01',
                    title: '項目一',
                    isDone: false
                },
                {
                    id: 'task02',
                    title: '項目二',
                    isDone: false
                },
                {
                    id: 'task03',
                    title: '項目三',
                    isDone: false
                }
            ]
        }
    },
    computed: {
        todoLists: function () {
            return this.lists.filter(item => !item.isDone)
        },
        doneLists: function () {
            return this.lists.filter(item => item.isDone)
        }
    }
}).mount('#app');

參考資料

如何理解vue中的key？
https://codertw.com/程式語言/682278/#outline__2_1