vue中v-model的用法是什么

在vue中，“v-model”用于將表單輸入綁定到對應的模型數據，能夠實現雙向綁定；包含了“v-bind”綁定value屬性和“v-on”監聽表單元素的輸入事件，并改變數據兩個操作，語法為“v-model="message"”。

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

vue中v-model的用法是什么

v-model可以將表單輸入綁定到對應的模型數據

我們通過v-model實現一個簡單的需求

通過表單input綁定模型數據message，表單數據變化data.message也發生變化

然后通過Mustache表達式，將變化之后的message數據顯示到視圖頁面上

v-model實際上是一個語法糖，也就是簡寫，他實際上包含了兩個操作：

• v-bind綁定value屬性

• v-on監聽表單元素的輸入事件，并改變數據

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可以實現數據的雙向綁定，普通的方式是頁面從data獲取數據，使用v-model能夠實現雙向綁定，就是在頁面發生變化的時候data也會改變

（2）實現原理

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

這是手動實現的雙向綁定

【