在vue中，“v-model”用于將表單輸入綁定到對(duì)應(yīng)的模型數(shù)據(jù)，能夠?qū)崿F(xiàn)雙向綁定；包含了“v-bind”綁定value屬性和“v-on”監(jiān)聽表單元素的輸入事件，并改變數(shù)據(jù)兩個(gè)操作，語法為“v-model="message"”。

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

vue中v-model的用法是什么

v-model可以將表單輸入綁定到對(duì)應(yīng)的模型數(shù)據(jù)

我們通過v-model實(shí)現(xiàn)一個(gè)簡(jiǎn)單的需求

通過表單input綁定模型數(shù)據(jù)message，表單數(shù)據(jù)變化data.message也發(fā)生變化

然后通過Mustache表達(dá)式，將變化之后的message數(shù)據(jù)顯示到視圖頁(yè)面上

v-model實(shí)際上是一個(gè)語法糖，也就是簡(jiǎn)寫，他實(shí)際上包含了兩個(gè)操作：

• v-bind綁定value屬性

• v-on監(jiān)聽表單元素的輸入事件，并改變數(shù)據(jù)

v-model的基本使用

（1）基本使用

<div id="app">   <input type="text" v-model="message">   {{message}} </div> <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       message: 'hello'     }   }) </script>

v-model可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，普通的方式是頁(yè)面從data獲取數(shù)據(jù)，使用v-model能夠?qū)崿F(xiàn)雙向綁定，就是在頁(yè)面發(fā)生變化的時(shí)候data也會(huì)改變

（2）實(shí)現(xiàn)原理

<div id="app">   <input type="text" :value="message" @input="message = $event.target.value">   <h2>{{message}}</h2> </div> <script src="../js/vue.js"></script> <script>   const app = new Vue({     el: '#app',     data: {       message: 'hello'     },     methods: {       valueChange(event) {         this.message = event.target.value;       }     }   }) </script>

這是手動(dòng)實(shí)現(xiàn)的雙向綁定

【