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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM