码迷,mamicode.com
首页 > 其他好文 > 详细

Vue—实例成员computed和watch

时间:2019-06-27 19:12:40      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:尼玛   必须   nbsp   alt   function   mode   back   成员   函数   

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>

技术图片

 

Vue—实例成员computed和watch

标签:尼玛   必须   nbsp   alt   function   mode   back   成员   函数   

原文地址:https://www.cnblogs.com/zhengyuli/p/11099000.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!