Vue-methods,watch和computed_vue methods 走了两回-CSDN博客

本文链接：https://blog.csdn.net/qq_28988969/article/details/103963635

案例

把firstName和lastName组合成fullName

为keyup事件绑定方法

<body>

    <div id="app">
        <!-- 为keyup事件绑定函数 -->
        <input type="text" v-model="firstName" @keyup="getFullName" /> +
        <input type="text" v-model="lastName" @keyup="getFullName" /> =
        <input type="text" v-model="fullName" />
    </div>

    <!-- 导入js -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>

        var vue = new Vue({
            el: "#app",
            data: {
                firstName: "",
                lastName: "",
                fullName: ""
            },
            methods: {
                getFullName: function () {
                    this.fullName = this.firstName + this.lastName
                }
            }
        })
    </script>
</body>

watch

<body>

    <div id="app">
        <input type="text" v-model="firstName" /> +
        <input type="text" v-model="lastName" /> =
        <input type="text" v-model="fullName" />
    </div>

    <!-- 导入js -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                firstName: "",
                lastName: "",
                fullName: ""
            },
            // 使用这个属性,可以监听data中指定数据的变化,然后触发watch中对应的function函数
            watch: {
                // 第一个参数最新的值,第二个参数旧的值
                firstName: function (newVal, oldVal) {
                    this.fullName = newVal + this.lastName
                },
                lastName: function (newVal, oldVal) {
                    this.fullName = this.firstName + newVal
                }
            }
        })
    </script>
</body>

computed

<body>

    <div id="app">
        <input type="text" v-model="firstName" /> +
        <input type="text" v-model="lastName" /> =
		<input type="text" v-model="fullName" />
    </div>

    <!-- 导入js -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                firstName: "",
                lastName: "",
            },
            computed: {
                fullName: function () {
                    return this.firstName + this.lastName
                }
            }
        })
    </script>
</body>