vue组件的watch属性

时间：2024-12-06 11:07:38
<!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>

相关文章