[TOC] ### 一、Vue3.x模板中使用JavaScript表達式 **業務邏輯:** ~~~ data() { return { number: 1 } } ~~~ **template模板**： ~~~ {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('')}} ~~~ ### 二、 v-if v-else v-else-if v-show #### 2.1 v-if **業務邏輯:** ~~~ data() { return { flag: 1 } } ~~~ **template模板**： ~~~ <p v-if="flag">v-if flag=true</p> ~~~ #### 2.2 v-if v-else ~~~ <div v-if="Math.random() > 0.5"> 大于0.5 </div> <div v-else> 小于0.5 </div> ~~~ `v-else` 元素必須緊跟在帶 `v-if` 或者 `v-else-if` 的元素的后面，否則它將不會被識別。 #### 2.3、v-else-if ~~~ <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> ~~~ 與相似`v-else`，`v-else-if`元素必須緊隨`v-if`或`v-else-if`元素 #### 2.4、在`<template>`元素上使用 v-if 條件渲染分組 因為 `v-if` 是一個指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個 `<template>` 元素當做不可見的包裹元素，并在上面使用 `v-if`。最終的渲染結果將不包含 `<template>` 元素。 ~~~ <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> ~~~ #### 2.5、v-show 另一個用于根據條件展示元素的選項是 `v-show` 指令 ~~~ <h1 v-show="ok">Hello!</h1> ~~~ #### 2.6、v-if 和 v-show的區別 v-if是dom操作，v-show只是css的顯示隱藏，一般來說，`v-if` 有更高的切換開銷，而 `v-show` 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 `v-show` 較好。 ### 三、計算屬性 #### 3.1 計算屬性入門 1、在模板中表達式非常便利，但是它們實際上只用于簡單的操作。 2、模板是為了描述視圖的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什么 Vue.js 將綁定表達式限制為一個表達式。如果需要多于一個表達式的邏輯，應當使用計算屬性。 **業務邏輯：** ~~~ export default { data() { return { a: 12, flag: true, message: "三國演義" }; }, computed: { reverseMsg() { return this.message.split("").reverse().join("") } }, methods: { setMsg() { this.message = "大家好" } } }; ~~~ **template模板**： ~~~ <template> {{reverseMsg}} <button @click="setMsg()">改變數據</button> </template> ~~~ #### 3.2、計算屬性實現數據的篩選 ~~~ export default { data() { return { a: 12, flag: true, message: "三國演義", list:['apple','banana','orange','pear'] }; }, computed: { reverseMsg() { return this.message.split("").reverse().join("") }, searchList() { var tempArr = []; this.listData.forEach((value) => { if (value.indexOf(this.keyword) != -1 && this.keyword != "") { tempArr.push(value) } }) console.log(tempArr) return tempArr; } }, methods: { setMsg() { this.message = "大家好" } } }; ~~~ ~~~ <template> <input type="text" v-model="keyword" placeholder="請輸入關鍵詞" /> <ul> <li v-for="(item,index) in searchList" :key="index">{{item}}</li> </ul> </template> ~~~ ### 四、watch監聽數據變化 Vue.js 提供了一個方法 watch ，它用于觀察 Vue 實例上的數據變動。當一些數據需要根據其它數據變化時，watch 很誘人 —— 特別是如果你來自 AngularJS 。不過，通常更好的辦法是使用計算屬性而不是一個命令式的 watch 回調。 **業務邏輯：** ~~~ export default { data() { return { firstName: "", lastName: "", fullName: "" }; }, watch: { firstName: function (val) { this.fullName = val + this.lastName; }, lastName: function (val) { this.fullName = this.firstName + val; } } }; ~~~ **template模板**： ~~~ <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> {{ fullName }} ~~~