Vue入門教程09-表單處理

一、input 和 textarea 輸入框

在之前的學習案例中，我們經常使用 v-model=“message” 的方式實現雙向數據綁定，而且v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值，總是以 Vue 實例的數據爲準。
以下是v-model實現input 和 textarea 輸入框雙向數據綁定：

<input v-model="msg" placeholder="請輸入內容">
<textarea v-model="msg" placeholder="請輸入內容"></textarea>

二、複選框

複選框checkbox的使用：

<template>
  <div id="hello">
    <p>單個複選框使用：v-model直接綁定checked關鍵詞(boolean類型)</p>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>
    <br/>
    <p>多個複選框：</p>
    <input type="checkbox" id="java" value="Java編程思想" v-model="books">
    <label for="java">Java編程思想</label>
    <input type="checkbox" id="vuejs" value="Vue入門教程" v-model="books">
    <label for="vuejs">Vue入門教程</label>
    <input type="checkbox" id="yuwen" value="語文書" v-model="books">
    <label for="yuwen">語文書</label>
    <br/><span>已選擇: {{ books }}</span>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data( ){
      return {
        checked:false,
        books:[]
      }
    }
  }
</script>

效果如下：

三、單選框

單選框radio使用格式L

    <input type="radio" id="Java" value="Java" v-model="picked">
    <label for="Java">Java</label>
    <br>
    <input type="radio" id="Python" value="Python" v-model="picked">
    <label for="Python">Python</label>
    <br>
    <span>選中值爲: {{ picked }}</span>

效果如下：

四、select下拉框

select下拉框綁定一個selected變量值：

  <div id="hello">
    <select v-model="selected" name="book">
      <option value="">選擇一本</option>
      <option value="Java編程思想">Java編程思想</option>
      <option value="Vue入門教程">Vue入門教程</option>
      <option value="語文書">語文書</option>
    </select>
    <div>
      選擇的書本是: {{selected}}
    </div>
  </div>

五、修飾符

1、.lazy:

默認情況下，v-model 每次 input 事件觸發後將輸入框的值與數據進行同步 (除了上述輸入法組合文字時)。可以添加 lazy 修飾符，從而轉變爲使用 change 事件進行同步：

//在“change”時而不是在“input”時更新 
<input v-model.lazy="msg" >

2、.number:

<input v-model.number="age" type="number">

3、.trim：

過濾用戶輸入的首尾空格：

<input v-model.trim="msg">

END.