Vue.js v-model雙向綁定

日期：
若要實現雙向綁定，可使用v-model，在HTML的元件上，或是自訂元件中，
加入 v-model="XXXXXX"，即可完成綁定動作。例子如下：

HTML部分

<input type="text" v-model="errorMessage" />
<div>${ errorMessage }</div>

說明：
input元件綁定一個data name為errorMessage
div ${ errorMessage } ，則是呈現這個data的值
因此當input改變內容值，代表畫面上輸入的值會透過errorMessage綁定，
然後呈現在div元件上。

js部分
var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    errorMessage: '輸入的值有誤，請重新輸入!',
  },
});
說明：
在vue的data裡面必須宣告errorMessage物件，此部分就是用來綁定前端元件的物件。
可以給定預設值，也可以是空白。



運作原理的部分可參考以下文章，有詳細的說明。






留言

張貼留言