vue的v-model指令
阿新 • • 發佈:2019-04-05
code str mod color bubuko data mage scrip vue
v-model指令用來綁定表單,數據傳值。
如上,當在信息1輸入框(表單)中輸入值時,數據會對應變化;在信息2輸入框中輸入值時,數據並未變化。
<div id="app"> <form> <p> <input type="text" v-model="message1"> </p> <p> <input type="text" v-model="this.message2"> </p> </form> <p> {{ message1 }}</p> <p> {{ message2 }} </p> </div> <script type="text/javascript"> new Vue({ el: "#app", data: { message1:"信息1", message2:"信息2" } })</script>
由於在信息2的input輸入框中,v-model指令中使用了this.message,導入無法將表單與data中的數據進行綁定。
結論:使用v-model指令時,只需要v-model="message",data:{message:"信息1"}結合使用,即可實現表單與數據的雙向綁定,在該文件中不論何處(methods中)this.message都可以得到該message的值。
vue的v-model指令