第六講、Vue3.x中使用JavaScript表示式 、條件判斷、 計算屬性和watch偵聽

frans發表於2021-01-04
VueJavaScript

一、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 }}
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章