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