快捷導(dǎo)航

Vue 表單輸入綁定v-model

更新時(shí)間：2021年10月27日 08:54:35 作者：Silent丿丶黑羽

這篇文章主要介紹了Vue 表單輸入綁定v-model，v-model指定可以實(shí)現(xiàn)表單值與屬性的雙向綁定。即表單元素中更改了值會(huì)自動(dòng)的更新屬性中的值，屬性中的值更新了會(huì)自動(dòng)更新表單中的值，下面一起進(jìn)入文章來哦姐文章詳情內(nèi)容

1.v-model

v-model指定可以實(shí)現(xiàn)表單值與屬性的雙向綁定。即表單元素中更改了值會(huì)自動(dòng)的更新屬性中的值，屬性中的值更新了會(huì)自動(dòng)更新表單中的值

2.綁定的屬性和事件

v-model在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：

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

3.表單元素綁定

3.1 input綁定

<input v-model="message" placeholder="請(qǐng)輸入...">
<p>輸入的內(nèi)容是：{{ message }}</p>

3.2 textarea綁定

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

3.3 checkbox綁定

多個(gè)復(fù)選框，綁定到同一個(gè)數(shù)組

<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綁定

單選時(shí)：

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

多選時(shí)，只需加上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.值綁定

對(duì)于單選按鈕，復(fù)選框及選擇框的選項(xiàng)，v-model 綁定的值通常是靜態(tài)字符串 (對(duì)于復(fù)選框也可以是布爾值)
但是有時(shí)我們可能想把值綁定到 Vue 實(shí)例的一個(gè)動(dòng)態(tài) property 上，這時(shí)可以用 v-bind 實(shí)現(xiàn)，并且這個(gè) 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: ["籃球", "足球", "羽毛球", "乒乓球", "網(wǎng)球"],
      testHobby: []
    }
  })
</script>

4.1 代碼詳解

1.我們?cè)?code>data中創(chuàng)建了hobbies數(shù)組，這里是為了模擬后端返回的數(shù)據(jù)，數(shù)據(jù)是動(dòng)態(tài)的
2.又定義了數(shù)組testHobby，這是將復(fù)選框中的數(shù)據(jù)與它進(jìn)行綁定，只要勾選了復(fù)選框中的數(shù)據(jù)，就會(huì)將其添加到testHobby中
3.使用了for循環(huán)，將hobbies數(shù)據(jù)中的數(shù)據(jù)遍歷出來
4.input標(biāo)簽中綁定了id屬性，value屬性，值為遍歷出來的數(shù)據(jù)，之后打開網(wǎng)頁源碼中可以看到
5.v-model將input標(biāo)簽與testHobby綁定

最后我們查看下綁定的效果，與綁定后的網(wǎng)頁源碼

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

5.修飾符

5.1 .lazy

在默認(rèn)情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步。你可以添加 lazy 修飾符，從而只有按下回車鍵或者失去焦點(diǎn)時(shí)，值才會(huì)發(fā)生變化：

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

5.2 .number

如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給 v-model 添加 number 修飾符：

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

這通常很有用，因?yàn)榧词乖?code> type="number" 時(shí)，HTML 輸入元素的值也總會(huì)返回字符串。如果這個(gè)值無法被 parseFloat() 解析，則會(huì)返回原始的值。

5.3 .trim

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

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

到此這篇關(guān)于Vue 表單輸入綁定v-model的文章就介紹到這了,更多相關(guān)Vue v-model 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线