Vue2.0的v-model指令
v-model="屬性" 寫在標籤中上,相當於在一個標籤上,同時寫了 :value='屬性值' @iinput='handler' ,而handler對應的函式如果沒有宣告,就是給該屬性值賦值的setter函式
程式碼一:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.min.js"></script> </head> <body> <div id="app"> <p>總數:{{total}}</p> <!-- 在自定義元件上使用v-model指令 --> <my-component v-model="total"></my-component> </div> <div id="app1"> <p>總數:{{total}}</p> <!--第一種寫法實際就是這種寫法 --> <my-component @input="handleGetTotal"></my-component> </div> <script> Vue.component('my-component',{ template:'<button @click="handleClick">+1</button>', data:function(){ return { counter:0 } }, methods: { handleClick:function(){ this.counter++; this.$emit('input',this.counter); } } }); Vue.component('my-component1',{ template:'<button @click="handleClick">+1</button>', data:function(){ return { counter:0 } }, methods: { handleClick:function(){ this.counter++; this.$emit('input',this.counter); } } }); let app=new Vue({ el:"#app", data:{ total:0 } }); let app1=new Vue({ el:"#app1", data:{ total:0 }, methods:{ handleGetTotal:function(total){ this.total=total; } } }); </script> </body> </html>
程式碼二:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.min.js"></script> </head> <body> <div id="app"> <p>總數:{{total}}</p> <!-- 在自定義元件上使用v-model指令 --> <my-component v-model="total"></my-component> </div> <div id="app1"> <p>總數:{{total}}</p> <!--第一種寫法實際就是這種寫法 --> <my-component @input="handleGetTotal"></my-component> </div> <script> Vue.component('my-component2',{ props:['value'],//? // 接收一個value屬性,在有新的value時觸發input事件 template:'<input :value="value" @input="updateValue">', methods: { updateValue:function(event){ this.$emit('input',event.target.value); } } }); Vue.component('my-component3',{ props:['value'],//? // 接收一個value屬性,在有新的value時觸發input事件 template:'<input :value="value" @input="updateValue">', methods: { updateValue:function(event){ this.$emit('input',event.target.value); } } }); let app2=new Vue({ el:"#app2", data:{ total:0 }, methods:{ handleReduce:function(total){ this.total--; } } }); let app3=new Vue({ el:"#app3", data:{ total:0 }, methods:{ handleGetTotal:function(total){ this.total=total; }, handleReduce:function(total){ this.total--; } } }); </script> </body> </html>