vue中v-model怎么使用

這篇文章主要講解了“vue中v-model怎么使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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">
  <h3>{{message}}</h3>
</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>

這是手動實現的雙向綁定

感謝各位的閱讀，以上就是“vue中v-model怎么使用”的內容了，經過本文的學習后，相信大家對vue中v-model怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！