Vue-101-Day 11

使用v-model這個 directive 與 input、textarea、select 元素進行雙向綁定。

註：表單元素使用 v-model 會忽略 value、checked、selected attribute的初始值而將 Vue Instance data 當成資料來源

text、textarea 元素使用 value 屬性及 input 事件
checkbox、radio 元素使用 checked 屬性及 change 事件
select 元素使用 value 屬性及 change 事件

Text

<div id="app-7">
  <input v-model="message" placeholder="edit me" />
  <p>Message is </p>
</div>

<div id="app-7">
  <input v-model="message" placeholder="edit me" />
  <p>Message is </p>
</div>

Multiline text

<div id="app-8">
  <span> Multiline message is：</span>
  <p style="white-space: pre-line"></p>
  <br />
  <textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>

var vm8 = new Vue({
  el: '#app-8',
  data: {
    message: ''
  }
})

註：在 textarea 不能使用插值(<textarea></textarea>)，而使用 v-model

Checkbox

<div id="app-9">
  <input v-model="checked" type="checkbox" />
  <label for="checkbox"> </label>
</div>

var vm9 = new Vue({
  el: '#app-9',
  data: {
    checked: true
  }
})

Multiple Checkbox

綁定多個 CheckBox 至同一個 Array

<div id="app-10">
  <input v-model="checkedNames" type="checkbox" value="Jack" />
  <label for="Jack"> Jack </label>
  <input v-model="checkedNames" type="checkbox" value="John" />
  <label for="John"> John </label>
  <input v-model="checkedNames" type="checkbox" value="Mike" />
  <label for="Mike"> Mike </label>
  <br />
  <span> Checked names: </span>
</div>

var vm10 = new Vue({
  el: '#app-10',
  data: {
    checkedNames: []
  }
})

RadioButton

<div id="app-11">
  <input v-model="picked" type="radio" value="One" />
  <label for="one"> One </label>
  <input v-model="picked" type="radio" value="Two" />
  <label for="two"> Two </label>
  <br />
  <span> Picked: </span>
</div>

var vm11 = new Vue({
  el: '#app-11',
  data: {
    picked: []
  }
})

Select

<div id="app-12">
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: </span>
</div>

var vm12 = new Vue({
  el: '#app-12',
  data: {
    selected: ''
  }
})

Multiple Select

<div id="app-12">
  <select v-model="selected" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: </span>
</div>

使用v-for渲染 Select 資料

<div id="app-12">
   <select v-model="selected">
    <option v-for="option in options" v-bind:value="option.value"></option>
  </select>
  <span>Selected: </span>
</div>

var vm12 = new Vue({
  el: '#app-12',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

Value Binding

v-model 通常綁定的值是 string 或是 boolean，但有時候想將 Vue Instance 綁定到動態屬性上，可以使用 v-bind 實現

Modifiers

.lazy

預設雙向綁定是以 input 事件為監聽，資料會即時更新，但加入 lazy 修飾符進行延遲更新，直到 change 事件觸發才更新

<div id="app-13">
  <input v-model.lazy="age" type="number" />
  <p></p>
</div>

.number

將 User 的輸入值轉為數值

<div id="app-13">
  <input v-model.number="age" type="number" />
</div>

.trim

去除 input 字串首尾空白

<div id="app-13">
  <input v-model.trim="msg" />
</div>

參考資料：

Form Input Bindings

Coding Diary