欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue 表單輸入綁定v-model

 更新時間：2021年10月27日 08:54:35   作者：Silent丿丶黑羽  
這篇文章主要介紹了Vue 表單輸入綁定v-model，v-model指定可以實現(xiàn)表單值與屬性的雙向綁定。即表單元素中更改了值會自動的更新屬性中的值，屬性中的值更新了會自動更新表單中的值 ，下面一起進(jìn)入文章來哦姐文章詳情內(nèi)容

1.v-model

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

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="請輸入...">
<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="請輸入多行內(nèi)容..."></textarea>

3.3 checkbox綁定

多個復(fù)選框，綁定到同一個數(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綁定

單選時：

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

對于單選按鈕，復(fù)選框及選擇框的選項，v-model 綁定的值通常是靜態(tài)字符串 (對于復(fù)選框也可以是布爾值)
但是有時我們可能想把值綁定到 Vue 實例的一個動態(tài) property 上，這時可以用 v-bind 實現(xiàn)，并且這個 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.我們在data中創(chuàng)建了hobbies數(shù)組，這里是為了模擬后端返回的數(shù)據(jù)，數(shù)據(jù)是動態(tài)的
  • 2.又定義了數(shù)組testHobby，這是將復(fù)選框中的數(shù)據(jù)與它進(jìn)行綁定，只要勾選了復(fù)選框中的數(shù)據(jù)，就會將其添加到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 修飾符，從而只有按下回車鍵或者失去焦點時，值才會發(fā)生變化：

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

5.2 .number

如果想自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給 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">

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

相關(guān)文章

最新評論