master

分支 (1)

管理

管理

master

learn-vue
/
demo_032.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>

</head>
<body>
    <div id="app">
        {{abc}}  <button @click="abc='射雕英雄传'">go</button><br>
        firstname: <input type="text" v-model="firstname">
        lastname: <input type="text" v-model="lastname" >
        fullname: <input type="text" v-model="fullname">
    </div>
    <script>
        // watch 强大之处在于，watch可以监听那些无法双向绑定的属性
        // 或者说，watch可以监听无法被用户输入而改变值的属性。
        var app = new Vue({
            el: "#app",
            data: {
                firstname: null,
                lastname: null,
                fullname: null,
                abc: "天龙八部"
            },
            watch: {  // watch哪个属性，哪个属性变化时，就会调用对应的函数。
                firstname() {
                    this.fullname = this.firstname + " " + this.lastname;
                },
                lastname() {
                    this.fullname = this.firstname + " " + this.lastname;
                },
                abc(newVal, oldVal) {
                    console.log("新值：" + newVal + ", 旧值：" + oldVal);
                }
            }
        });
    </script>
</body>
</html>