Vue中的表單輸入綁定,雙向綁定方式
更新時(shí)間：2025年03月25日 16:37:44 作者：天馬3798
這篇文章主要介紹了Vue中的表單輸入綁定,雙向綁定方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
一、v-model 指令
- 用于Vue 表單雙向綁定
- 用戶Vue 組件屬性雙向綁定
v-model 還可以用于各種不同類型的輸入，<textarea>、<select> 元素。
它會(huì)根據(jù)所使用的元素自動(dòng)使用對(duì)應(yīng)的 DOM 屬性和事件組合：
- 文本類型的
<input>和<textarea>元素會(huì)綁定valueproperty 并偵聽input事件； <input type="checkbox">和<input type="radio">會(huì)綁定checkedproperty 并偵聽change事件；<select>會(huì)綁定valueproperty 并偵聽change事件。
二、v-model 使用案例
- 文本
姓名： <input type="text" v-model="student.name">
- 多行文本
簡(jiǎn)介： <textarea v-model="student.summary"></textarea>
- 單選
所屬省份：
<template v-for="item in areas">
<div>
<label > <input type="radio" name="area" :value="item" v-model="student.province">{{item}}</label>
</div>
</template><script>
export default {
data() {
return {
student: {
name: '張三',
score: 100.5,
password: ' 1234 '
},
age: 10.8,
areas: ['濟(jì)南', '聊城', '北京']
}
}
}
</script>- 多選
多選省份：
<template v-for="item in areas">
<div>
<label> <input type="checkbox" name="checkvalue" :value="item" v-model="student.checkvalue">{{ item }}</label>
</div>
</template>export default {
data() {
return {
student: {
checkvalue:[]//多選框需要對(duì)應(yīng)數(shù)組
}
}
}
}- 下拉選擇
下拉選擇：
<select v-model="student.sel">
<option :value="item" v-for="item in areas">{{ item }}</option>
</select>三、v-model 修飾符
.lazy?
- 默認(rèn)情況下，
v-model會(huì)在每次input事件后更新數(shù)據(jù) (IME 拼字階段的狀態(tài)例外)。 - 你可以添加
lazy修飾符來改為在每次change事件后更新數(shù)據(jù)：
<!-- 在 "change" 事件后同步更新而不是 "input" --> <input v-model.lazy="msg" />
.number?
- 如果你想讓用戶輸入自動(dòng)轉(zhuǎn)換為數(shù)字。
- 你可以在
v-model后添加.number修飾符來管理輸入：
<input type="number" v-model.number="student.score">
- 如果該值無法被 parseFloat() 處理，那么將返回原始值。
- 特別是當(dāng)輸入為空時(shí) (例如用戶清空輸入字段之后)，會(huì)返回一個(gè)空字符串。
注意：要制定type=number html屬性
.trim?
- 如果你想要默認(rèn)自動(dòng)去除用戶輸入內(nèi)容中兩端的空格。
- 你可以在
v-model后添加.trim修飾符：
<input v-model.number="student.password">
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+Tsx給路由加切換動(dòng)畫時(shí)的踩坑及解決
這篇文章主要介紹了Vue3+Tsx給路由加切換動(dòng)畫時(shí)的踩坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue.js項(xiàng)目在IE11白屏報(bào)錯(cuò)的解決方法
本文主要介紹了Vue.js項(xiàng)目在IE11白屏報(bào)錯(cuò)的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
插槽，也就是slot，是組件的一塊HTML模板，這塊模板顯示不現(xiàn)實(shí)、以及怎樣顯示由父組件來決定。這篇文章主要介紹了淺析vue插槽和作用域插槽的理解,需要的朋友可以參考下2019-04-04
UniApp中實(shí)現(xiàn)類似錨點(diǎn)定位滾動(dòng)效果
一個(gè)uniapp小程序的項(xiàng)目,我們需要實(shí)現(xiàn)一個(gè)非常實(shí)用的功能——類似于錨點(diǎn)定位的交互效果,即在首頁(yè)中有多個(gè)tab（分類標(biāo)簽）,每個(gè)tab對(duì)應(yīng)著不同的模塊,當(dāng)用戶點(diǎn)擊某個(gè)分類的tab時(shí),需要流暢地滾動(dòng)到對(duì)應(yīng)的內(nèi)容位置,提供更好的用戶體驗(yàn),2023-10-10
基于Vue2實(shí)現(xiàn)移動(dòng)端圖片上傳、壓縮、拖拽排序、拖拽刪除功能
這篇文章主要介紹了基于Vue2實(shí)現(xiàn)移動(dòng)端圖片上傳、壓縮、拖拽排序、拖拽刪除功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
今天學(xué)習(xí) /deep/ 樣式穿透，因?yàn)関ue3中已經(jīng)使用:deep()取代了/deep/ ，所以直接用:deep()練習(xí)，這篇文章主要介紹了Vue3中樣式滲透:deep()為什么無效,需要的朋友可以參考下2022-11-11
vue better scroll 無法滾動(dòng)的解決方法
better scroll可以實(shí)現(xiàn)輪播圖和頁(yè)面滾動(dòng)，是移動(dòng)端滾動(dòng)插件，這篇文章主要介紹了vue better scroll 無法滾動(dòng)的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-06-06
iview同時(shí)驗(yàn)證多個(gè)表單問題總結(jié)
這篇文章主要介紹了iview同時(shí)驗(yàn)證多個(gè)表單問題總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue3中的hook簡(jiǎn)單封裝，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 點(diǎn)擊展開顯示更多(點(diǎn)擊收起部分隱藏)
這篇文章主要介紹了vue 點(diǎn)擊展開顯示更多(點(diǎn)擊收起部分隱藏)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04