Vue.js 觀察者(watch)

時間 2019-11-17

標籤 vue.js vue 觀察者 watch 欄目 JavaScript 简体版

原文原文鏈接

Vue.js 觀察者(watch)

watch 屬性用於監視 vue 實例上的數據變更，並相應的改變其餘變量的值。css

用法

實例 1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js 觀察者(watch)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
    <title>Vue.js 觀察者(watch)</title>
    <script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
            <input type="text" v-model="firstName"/>
            <input type="text" v-model="lastName"/>
            <p>個人名字是：{{fullName}}</p>
        </div>

    <script>
       var em = new Vue({
            el: '#app',
            data: {
                firstName: 'stephen',
                lastName: 'curry',
                fullName: 'stephen curry'
            },
            watch: {
                firstName: function (curVal, oldVal) {
                    this.fullName = curVal + ' ' + this.lastName
                },
                lastName: function (curVal, oldVal) {
                    this.fullName = this.firstName + ' ' + curVal
                }
            }
        })
    </script>
</body>
</html>

上述代碼中，監視了firstName和lastName這兩個變量，當用戶輸入新的數據改變其值時，watch就會執行對應的函數，返回處理後的值並賦值給fullName變量。html

註釋：curVal 表示當前數據，oldVal 表示前一步數據（或默認數據），可參考實例2的代碼。vue

實例 2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js 觀察者(watch)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
    <title>Vue.js 觀察者(watch)</title>
    <script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="number"/>
        <p>result：{{result}}</p>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                number: 1,
                result: 1
            },
            watch: {
                number: function(curVal, oldVal) {
                    this.result = curVal*1 + oldVal*1
                }
            }
        })
    </script>
</body>
</html>

上述代碼中，result 結果爲當前輸入數據和前一步數據之和。另外，oldVal 參數可缺省。web

注意：當監視的數據是一個數組或者對象時，curVal 和 oldVal 是相等的，由於這兩個形參指向的是同一個數據對象。數組

Watch deep 選項

類型是對象的變量，當鍵值發生變化時，爲了監聽到數據變化，須要設置deep選項爲true，以下：app

實例 3

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js 觀察者(watch)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
    <title>Vue.js 觀察者(watch)</title>
    <script src="http://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="fruits.count"/>
        <input type="text" v-model="fruits.name"/>
        <p>fruits：{{message}}</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                fruits: {
                    name: "香蕉",
                    count: 5
                },
                message: '5條香蕉'
            },
            watch: {
                fruits: {
                    handler(obj){
                        this.message = obj.count + '條' + obj.name
                    },
                    deep: true
                }
            }
        })
    </script>
</body>
</html>