Vue 表單輸入繫結v-model
阿新 • • 發佈:2021-10-28
目錄
- 1.v-model
- 2.繫結的屬性和事件
- 3.表單元素繫結
- 3.1 input繫結
- 3.2 textarea繫結
- 3.3 checkbox繫結
- 3.4 radio繫結
- 3.5 select繫結
- 4.值繫結
- 4.1 程式碼詳解
- 5.修飾符
- 5.1 .lazy
- 5.2 .number
- 5.3 .trim
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 textawww.cppcns.comrea繫結
<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 ({ 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=www.cppcns.com"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
在每次 iGVWrSgcWnput
事件觸發後將輸入框的值與資料進行同步 。你可以新增 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
內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!