iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
3
Modern Web

初探Vue.js 30天系列 第 6

[Day 6] v-model 雙向綁定-表單資料處理好幫手

v-model

前面講到v-bind是單向綁定,而今天就要來講雙向綁定的v-model(Two-way Binding)

v-model常用於表單元素來做雙向數據綁定,結合v-bind跟v-on一樣,用v-bind初始綁定與呈現資料,用v-on監聽事件來做資料更新。

v-model = v-bind + v-on 語法糖

下面兩種寫法可以達到一樣的結果!/images/emoticon/emoticon01.gif

<input v-model="message">
<input :value="message" @input="message=$event.target.value">

說明:
將value值綁定在message變數上,當值發生改變時觸發v-on綁定的input事件。
input事件綁定的函數,是將觸發input事件的目標(該input)的value值,賦給message這個變數

v-model 常用表單用法如input、checkbox、select,就來實際練習吧!

input

<div id="app">
    <input type="text" v-model="message" />
    <font>{{ message }}</font>
</div>
let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!',
  },
});

使用 v-model 綁定Instance的 data message,在輸入框打字的同時,顯示的文字就會與輸入框的值同步。

checkbox

<div id="app">
	<input type="checkbox" v-model="check" value="1" />
	<label>checkbox 1<label>
	<input type="checkbox" v-model="check" value="2" />
	<label>checkbox 2<label>
	<input type="checkbox" v-model="check" value="3" />
	<label>checkbox 3<label>
    <input type="checkbox" v-model="check" value="4" />
	<label>checkbox 4<label>
	<p>checkbox:{{ checkArray }}</p>
</div>
let app = new Vue({
  el: '#app',
  data: {
    checkArray: [],
  },
});
透過 v-model 綁定 checkArray,當全部勾選,data呈現如下:

checkbox:["1","2","3","4"]

select

<div id="app">
	<select v-model="selected">
        <option value="">請選擇</option>
		<option value="1">選項1</option>
		<option value="2">選項2</option>
		<option value="3">選項3</option>
	</select>
	<p>選到的選項value為:{{ selected }}</p>
</div>
let app = new Vue({
    el: '#app',
    data: {
        selected: ''
    },
});

透過 v-model 綁定 selected,當點擊選項後selected的value就會同步目前選項的value。
我點擊選項1後,呈現如下:
選到的選項value為1

v-model 修飾符

  • v-model.lazy

    預設是v-model 在每次 input 事件觸發後,將輸入框的值與數據進行同步。
    若添加 lazy 修飾符,則轉變為使用 change 事件進行同步,即離開輸入欄位時,才輸出資料
    參考大大的說法

  • v-model.number:

    將輸入的"數值"強制轉換為Number type.

  • v-model.trim:

    過濾掉輸入的首尾空白

Resource
如何理解v-model的實質為語法糖
Vue.js 學習筆記


上一篇
[Day 5] v-on 聽聽看DOM事件
下一篇
[Day 7] v-if/v-show 傻傻分不清楚
系列文
初探Vue.js 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言