vue组件的watch属性

本文转载自查看原文 2017-11-01 20:03 2593 Vue

<!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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 【Vue】组件watch props属性值【Vue】组件watch props属性值 vue watch 可以监听子组件props里面属性的改变 vue实例的watch属性 vue(七)--监听属性（watch） vue中的watch属性 vue watch关于对象内的属性监听 vue watch 中deep属性 vue watch监听新增属性 vue-$watch属性方法