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

computed和watch的用法和区别

时间:2019-09-24 12:16:35      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:color   函数   last   参数   除了   回调函数   model   type   OLE   

computed可以监听v-model(data)中的值,只要值发生变化 他就会重新去计算
computed必须是要有一个返回值的哦 
  <div id="app">
        <input type="text" v-model="firstname">+
        <input type="text" v-model="lasttname">=
        <input type="text" v-model="fullname">
    </div>
var vm = new Vue({
            el: "#app",
            data: {
                firstname: "",
                lasttname: "",
            },
            methods: {

            },
             
             // computed可以监听v-model(data)中的值,只要值发生变化 他就会重新去计算
             // computed必须是要有一个返回值的哦 
            computed: {
                fullname: function () {
                    return this.firstname + "-" + this.lasttname
                }
            },
        })

 

//watch除了可以监听data中值的变化,还可以监听路由的变化,
//watch中有两个参数 分别是新值和旧值

     var vm = new Vue({
            el: "#app",
            data: {

            },
            methods: {

            },
            router: router,
            watch: {
                "$route.path":function(newval,oldval){
                if(newval==="/login"){
                    console.log("这是denglu页面")
                }else if(newval==="/zhuce"){
                    console.log("这是注册页面")

                }
                }
            },

        })

 

computed和watch的区别
《1》计算属性computed 必须要返回一个值哦 通过return来返回的

《2》 watch的回调函数里面有两个参数,分别是newval和oldval。

computed和watch的用法和区别

标签:color   函数   last   参数   除了   回调函数   model   type   OLE   

原文地址:https://www.cnblogs.com/IwishIcould/p/11577351.html

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