Vue—实例成员computed和watch

Posted 2022-02-18 zhengyuli

Computed

一个变量依赖于多个变量

现在需要full_name这个变量以来于first_name和last_name这两个变量需要用到computed

 

好处：

1.相当于在computed中定义的变量值等于绑定的函数的的返回值，该变量无需再data中声明

2.在computed绑定的函数中所有的变量都会进行监听,只要写在里面就会被监听

 

<div id="app">
    <p>
        姓：<input type="text" v-model="first_name">
        名：<input type="text" v-model="last_name">
    </p>
    <p>
        姓名：<b> full_name </b>
    </p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue(
        el: ‘#app‘,
        data: 
            first_name:‘‘,
            last_name:‘‘,
            // full_name:‘None‘
        ,
        computed:
            full_name:function () 
                // let a =this.first_name;
                // let b =this.last_name;
                // console.log(‘尼玛‘);
                // return‘123‘
                return this.first_name+this.last_name
            
        
    )
</script>

 

watch

watch这个方法不是监听内部的,后方绑定的函数就是监听前方的变量，变量值改变，函数被调用，绑定的变量必须在data中声明

<div id="app">
    <p>姓名：<input type="text" v-model="full_name"></p>
    <p>
        姓：<b>first_name</b>
        名：<b>last_name</b>
    </p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue(
        el: ‘#app‘,
        data: 
            full_name:‘‘,
            first_name:‘‘,
            last_name:‘‘
        ,
        watch:
            //1.后方绑定的函数就是监听前方的变量，变量值改变，函数被调用
            full_name:function () 
                let res = this.full_name.split(‘‘);
                this.first_name = res[0];
                this.last_name = res[1]

            
        
    )
</script>