【Vue.js學習筆記】表單輸入綁定

我發過的vue學習筆記只有簡單提到過model雙向綁定,好像沒詳細整理過,那就特別發一篇吧。

可以用 v-model屬性在表單的inputtextareaselect…等元素上創建雙向資料綁定。它會根據控件類型自動選取正確的方法來更新元素。

v-model 會忽略所有表單元素的 value、checked、selected 屬性的初始值,而是將 Vue 實例的data作為資料來源。

  • text 和 textarea 元素使用 value property 和 input 事件;
  • checkbox 和 radio 使用 checked property 和 change 事件;
  • select 字段將 value 作為 prop 並將 change 作為事件。

單行文本

v-model綁定sinMessage,input 的 placeholder 屬性可設定輸入框顯示值。

<div id="app">
  <span>single message is:</span>
  <p>{{ sinMessage }}</p>
  <input placeholder="single lines" v-model="sinMessage">
</div>

data 新增一個 sinMessage 為空值。

var app = new Vue({
  el: '#app',
  data: {
     sinMessage: ''
  }
})

效果:

20200508095807 【Vue.js學習筆記】表單輸入綁定

多行文本

將input改為textarea,v-model綁定mulMessage:

<div id="app">
   <span>Multiline message is:</span>
   <p style="white-space: pre-line;">{{ mulMessage }}</p>
   <br>
   <textarea placeholder="add multiple lines" v-model="mulMessage"></textarea>
</div>
var app = new Vue({
  el: '#app',
  data: {
     mulMessage: 'type st.'
  }
})

效果:

20200508100145 【Vue.js學習筆記】表單輸入綁定

複選框

單個複選框,綁定布林值。

使用checkbox 將v-model綁定checked,這邊內插值{{checked}}顯示為布林值true或false。

<div id="app">
   <input type="checkbox" id="checkbox" v-model="checked">
   <label for="checkbox">{{ checked }} 勾選狀態</label>
</div>
var app = new Vue({
  el: '#app',
  data: {
     checked: true
  }
})

效果:

20200508100806 【Vue.js學習筆記】表單輸入綁定
20200508100815 【Vue.js學習筆記】表單輸入綁定

多個複選框,綁定到同一個陣列。

將多個複選框 v-model 綁定到相同的陣列checkedNames:

<div id='app'>
   <p>複選狀態</p>
   <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
   <label for="jack">Jack</label>
   <input type="checkbox" id="john" value="John" v-model="checkedNames">
   <label for="john">John</label>
   <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
   <label for="mike">Mike</label>
   <br>
   <span>Checked names: {{ checkedNames }}</span>
</div>
var app = new Vue({
   el: '#app',
   data: {
     checkedNames: [],
   }
})

效果:

20200508100723 【Vue.js學習筆記】表單輸入綁定

單選按鈕

使用 radio ,將v-model綁定到 picked:

<div id='app'>
<p>單選狀態</p>
   <input type="radio" id="one" value="One" v-model="picked">
   <label for="one">One</label>
   <br>
   <input type="radio" id="two" value="Two" v-model="picked">
   <label for="two">Two</label>
   <br>
   <span>Picked: {{ picked }}</span>
</div>

picked設為空值:

var app = new Vue({
   el: '#app',
   data: {
     picked: ''
   }
})

效果:

20200508101040 【Vue.js學習筆記】表單輸入綁定

選擇框

單項選擇

將select標籤 v-model設為selected,option用for迴圈來讀取值(當然也可以一個一個option列出來):

<div id='app'>
 <select v-model="selected">
 <option disabled value="">請選擇</option>
  <option v-for="option in options" v-bind:value="option.value">
  {{ option.text }}
  </option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
var app = new Vue({
    el: '#app',
    data: {
       selected: '',
       options: [{
          text: 'One',
          value: 'A'
       }, {
          text: 'Two',
          value: 'B'
       }, {
          text: 'Three',
          value: 'C'
       }]
    }
})

如果 v-model 表達式的初始值未能匹配任何選項,select 元素將被渲染為”未選中”狀態。在 iOS 中,這會使用戶無法選擇第一個選項。因為這樣的情況下,iOS 不會觸發 change 事件。因此,更推薦像上面這樣提供一個值為空的禁用選項。

效果:

20200508101623 【Vue.js學習筆記】表單輸入綁定

多項選擇

同上方用法,只是需要在 select 加上 multiple屬性;多項選擇綁定到同一個陣列。

<div id='app'>
<p>多項選擇</p>
<select v-model="mulSelected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ mulSelected }}</span>
</div>
var app = new Vue({
    el: '#app',
    data: {
       options: [{
          text: 'One',
          value: 'A'
       }, {
          text: 'Two',
          value: 'B'
       }, {
          text: 'Three',
          value: 'C'
       }],
       mulSelected: []
    }
})

效果:

20200508101952 【Vue.js學習筆記】表單輸入綁定
0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論