watch-监听器

<template>
    <div>
        姓
        <input type="text" v-model="firstName">
        <p></p>
        名
        <input type="text" v-model="secondName">
        <p></p>
        姓名
        <input type="text" v-model="fullName">
    </div>
</template>

<script>
export default {
    
    
    name: "Watch",
    data() {
    
    
        return {
    
    
            firstName: "",
            secondName: "",
            fullName: "",
        }
    },
    watch: {
    
    
        firstName(value) {
    
    
            this.fullName = value +" "+ this.secondName;
        },
        secondName(value) {
    
    
            this.fullName = this.firstName +" "+ value;
        },
        fullName(value) {
    
    
            let arr = value.split(" ");
            this.firstName = arr[0];
            this.secondName = arr[1];
        }
    },
}
</script>

<style scoped>

</style>

• Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化