vue如何實(shí)現(xiàn)表單多選并且獲取其中的值
更新時間：2023年07月03日 09:49:48 作者：web前端 zxp
這篇文章主要介紹了vue如何實(shí)現(xiàn)表單多選并且獲取其中的值問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue實(shí)現(xiàn)表單多選并且獲取其中的值
說明
使用 v-model 指令 結(jié)合 name / value 使用
需要你的 data 里面的數(shù)據(jù)類型為 數(shù)組
代碼說明
為什么會是 v-model.number ？
這是將它的值固定為 數(shù)字類型，否則你獲取到的就是字符串
<div id="root">
<input type="checkbox" v-model.number="hobby" name="hobby" value="1">學(xué)習(xí)
<input type="checkbox" v-model.number="hobby" name="hobby" value="2">游泳
<input type="checkbox" v-model.number="hobby" name="hobby" value="3">下棋
<input type="checkbox" v-model.number="hobby" name="hobby" value="4">乒乓球
<div>{{hobby}}</div>
</div>
</body>
<script>
new Vue({
el:"#root",
data:{
hobby:[4] //默認(rèn)的選擇第四個，你可以不選默認(rèn)項(xiàng)
},
})
</script>
它現(xiàn)在的值就是 data 數(shù)組中的數(shù)據(jù)，想要獲得數(shù)據(jù)直接使用這個數(shù)組
vue獲取表單數(shù)據(jù)——input、radio、checkbox、select、textarea
獲取表單數(shù)據(jù)（案例）
1.效果
注意：這個案例只是簡單的再前端輸出獲取的表單內(nèi)容，并沒有提交到后臺
2.代碼
<div class="root">
<form @submit.prevent="demo">
<!-- trim去掉首尾空格,中間的空格去不掉 -->
賬號:<input type="text" v-model.trim="userInfo.account"> <br><br>
密碼:<input type="text" v-model="userInfo.password"><br><br>
<!-- number輸入的字符串轉(zhuǎn)換為數(shù)字 -->
年齡:<input type="number" v-model.number="userInfo.age"><br><br>
性別:
男<input type="radio" v-model="userInfo.sex" name="sex" value="男">
女<input type="radio" v-model="userInfo.sex" name="sex" value="女"><br><br>
愛好：
學(xué)習(xí)<input type="checkbox" v-model="userInfo.hobby" value="學(xué)習(xí)">
打游戲<input type="checkbox" v-model="userInfo.hobby" value="打游戲">
吃飯<input type="checkbox" v-model="userInfo.hobby" value="吃飯">
<br><br>
選擇地址:
<select v-model="userInfo.city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="武漢">武漢</option>
</select> <br><br>
其他信息：
<!-- lazy失去焦點(diǎn)再獲取數(shù)據(jù) -->
<textarea v-model.lazy="userInfo.other" cols="30" rows="10"></textarea>
<br><br>
<input type="checkbox" v-model="userInfo.agree">
閱讀并接受<a href="www.baidu.com" rel="external nofollow" >《用戶協(xié)議》</a>
<button>提交</button>
</form>
</div>new Vue({
el: '.root',
data() {
return {
userInfo: {
account: '',
password: '',
sex: '',
hobby: [],
city: '北京',
other: '',
agree: '',
age: ''
}
}
},
methods: {
demo() {
//JSON.stringify() 將數(shù)據(jù)轉(zhuǎn)換為json字符串
console.log(JSON.stringify(this.userInfo));
}
},
})心得
收集表單數(shù)據(jù)：
1.＜input type=“text”/＞，則v-model收集的是value值，用戶輸入的就是value值。
＜input type=“radio”/＞，則v-model收集的是value值，且要給標(biāo)簽配置value值。
2.＜input type=“checkbox”/＞沒有配置input的value屬性，那么收集的就是checked（勾選 or 未勾選，是布爾值）
3.配置input的value屬性：
- (1)v-model的初始值是非數(shù)組，那么收集的就是checked（勾選 or 未勾選，是布爾值）
- (2)v-model的初始值是數(shù)組，那么收集的的就是value組成的數(shù)組
4.備注：v-model的三個修飾符：
lazy：失去焦點(diǎn)再收集數(shù)據(jù)number：輸入字符串轉(zhuǎn)為有效的數(shù)字trim：輸入首尾空格過濾
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了在Vue.Js中的$watch()方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
對Vue2 自定義全局指令Vue.directive和指令的生命周期介紹
今天小編就為大家分享一篇對Vue2 自定義全局指令Vue.directive和指令的生命周期介紹，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。本文給大家詳細(xì)介紹了vue解決跨域路由沖突問題思路解析，需要的朋友參考下吧2017-11-11
vue使用keep-alive保持滾動條位置的實(shí)現(xiàn)方法
這篇文章主要介紹了vue使用keep-alive保持滾動條位置的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04 
vue項(xiàng)目打包部署到nginx后css樣式失效的問題及解決方法
我將自己的前端Vue項(xiàng)目,經(jīng)過build生成的dist文件夾copy到nginx的html文件夾中,然后寫了配置文件,運(yùn)行訪問后發(fā)現(xiàn)頁面css樣式?jīng)]有加載到,下面給大家介紹vue項(xiàng)目打包部署到nginx后css樣式失效的問題及解決方法,感興趣的朋友一起看看吧
2024-12-12 
這篇文章主要介紹了Vue.js 父子組件通訊開發(fā)實(shí)例的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09 
Vue導(dǎo)入Echarts實(shí)現(xiàn)折線圖
這篇文章主要給大家介紹了關(guān)于vue+echarts實(shí)現(xiàn)折線圖的方法與注意事項(xiàng)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-12-12 
vue中el-date-picker type=daterange日期清空時不回顯的解決
這篇文章主要介紹了vue中el-date-picker type=daterange日期清空時不回顯的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07 
這篇文章給大家分享了vue.js刪除列表中的一行的實(shí)例操作以及代碼分享，有興趣的朋友參考下。
2018-06-06