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