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: &#39;#app&#39;,
    data: {
      message: &#39;hello&#39;
    }
  })
</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: &#39;#app&#39;,
    data: {
      message: &#39;hello&#39;
    },
    methods: {
      valueChange(event) {
        this.message = event.target.value;
      }
    }
  })
</script>

這是手動實現的雙向綁定

【相關推薦：《vue.js教學》】

以上是vue中v-model的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！