1. 程式人生 > >vue的v-model指令

vue的v-model指令

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指令