vue组件watch属性实例讲解

2024-05-06 15:24:43

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了vue组件watch属性的具体代码，供大家参考，具体内容如下

<!doctype html><html> <head> <meta charset="UTF-8"> <title>wacth属性</title> <script src="js/vue.js"></script> </head> <body> <div id="container">  <p>{{msg}}</p>  <my-component></my-component> </div> <script>  Vue.component("my-component",{   data:function(){    return {     myInput:"",     myPhone:123456    }   },   template:`    <div>     <input type="text" v-model="myInput"/>     <input type="text" v-model="myPhone"/>     <span>{{myInput}}</span>    </div>   `,   watch:{    myInput:function(){    //当数据发生变化、执行的操作    　　 console.log("数据改变");    },    myPhone:function(){     console.log(this.myPhone);    }   }  })  new Vue({   el:"#container",   data:{    msg:"Hello VueJs"   }  }) </script> </body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持错新站长站。

上一篇：详解Vue路由钩子及应用场景（小结）

下一篇：Vue-Router来实现组件间跳转的三种方法