Vue 表單輸入綁定v-model

Posted on by

1.v-model

v-model指定可以實現表單值與屬性的雙向綁定。即表單元素中更改瞭值會自動的更新屬性中的值，屬性中的值更新瞭會自動更新表單中的值

2.綁定的屬性和事件

v-model在內部為不同的輸入元素使用不同的屬性並拋出不同的事件：

  • 1.text和textarea元素使用value屬性和input事件。
  • 2.checkbox和radio使用checked屬性和change事件。
  • 3.select字段將value作為prop並將change作為事件。

3.表單元素綁定

3.1 input綁定

<input v-model="message" placeholder="請輸入...">
<p>輸入的內容是：{{ message }}</p>

3.2 textarea綁定

<span>輸入的內容是：</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="請輸入多行內容..."></textarea>

3.3 checkbox綁定

多個復選框，綁定到同一個數組

<div id="app">
  <input type="checkbox" id="basketball" value="籃球" v-model="hobby">
  <label for="basketball">籃球</label>
  <input type="checkbox" id="football" value="足球" v-model="hobby">
  <label for="football">足球</label>
  <input type="checkbox" id="volleyball" value="排球" v-model="hobby">
  <label for="volleyball">排球</label>
  <p>{{hobby}}</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      hobby: []
    }
  })
</script>

3.4 radio綁定

<div id="app">
  <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>
new Vue({
  el: '#app',
  data: {
    picked: ''
  }
})

3.5 select綁定

單選時：

<div id="#app">
  <select v-model="selected">
    <option disabled value="">請選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

多選時，隻需加上multiple屬性即可

<div id="#app">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

4.值綁定

對於單選按鈕，復選框及選擇框的選項，v-model 綁定的值通常是靜態字符串 (對於復選框也可以是佈爾值)
但是有時我們可能想把值綁定到 Vue 實例的一個動態 property 上，這時可以用 v-bind 實現，並且這個 property 的值可以不是字符串。

<div id="app">
  <label v-for="hobby in hobbies">
    <input type="checkbox" :id="hobby" :value="hobby" v-model="testHobby">{{hobby}}
  </label>
  <p>{{testHobby}}</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      hobbies: ["籃球", "足球", "羽毛球", "乒乓球", "網球"],
      testHobby: []
    }
  })
</script>

4.1 代碼詳解

  • 1.我們在data中創建瞭hobbies數組，這裡是為瞭模擬後端返回的數據，數據是動態的
  • 2.又定義瞭數組testHobby，這是將復選框中的數據與它進行綁定，隻要勾選瞭復選框中的數據，就會將其添加到testHobby中
  • 3.使用瞭for循環，將hobbies數據中的數據遍歷出來
  • 4.input標簽中綁定瞭id屬性，value屬性，值為遍歷出來的數據，之後打開網頁源碼中可以看到
  • 5.v-model將input標簽與testHobby綁定

最後我們查看下綁定的效果，與綁定後的網頁源碼

我們可以看到綁定後id和value的值都是遍歷後的hobby

5.修飾符

5.1 .lazy

在默認情況下，v-model 在每次 input 事件觸發後將輸入框的值與數據進行同步 。你可以添加 lazy 修飾符，從而隻有按下回車鍵或者失去焦點時，值才會發生變化：

<!-- 在失去焦點時或輸入回車時改變值，而非“input”時更新 -->
<input v-model.lazy="msg">

5.2 .number

如果想自動將用戶的輸入值轉為數值類型，可以給 v-model 添加 number 修飾符：

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

這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字符串。如果這個值無法被 parseFloat() 解析，則會返回原始的值。

5.3 .trim

如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：

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

到此這篇關於Vue 表單輸入綁定v-model的文章就介紹到這瞭,更多相關Vue v-model 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：