Vue如何獲取表單數(shù)據(jù)
表單用于搜集不同類型的用戶輸入，Vue針對不同的表單輸入類型，也提供了不同的的輸入控制及驗證。
一、獲取表單數(shù)據(jù)
開始前的準(zhǔn)備，在目錄下創(chuàng)建文件夾及對應(yīng)的頁面如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>收集表單數(shù)據(jù)</title>
<script src="../js/vue.js" type="text/javascript"></script>
</head>
<body>
<!-- 準(zhǔn)備好一個容器 -->
<div id="root">
</div>
<script type="text/javascript">
//Vue.config.productionTip = false //阻止 vue 在啟動時生成生產(chǎn)提示。
// 創(chuàng)建vue實例
const vm = new Vue({
el:'#root',
//函數(shù)式
data:function(){
return{
info:{
name:'摔跤貓子',
}
};
}
});
</script>
</body>
</html>1.1 input
默認類型的input框通過前面幾章所介紹的v-model雙向綁定即可
這里再插一個小技巧，當(dāng)表單的內(nèi)容為左側(cè)標(biāo)題及右側(cè)文本框這樣的布局組成時，如何實現(xiàn)點擊標(biāo)題光標(biāo)自動在右側(cè)的文本框選中呢?
只需要在左側(cè)標(biāo)題的label標(biāo)簽中添加一個for的同時指定一個名稱，同時在需要選中光標(biāo)的文本框設(shè)置相同的id值即可
<label for="number">學(xué)號:</label> <input type="text" v-model="number" id="number" autocomplete="off" />
1.2 radio
在使用radio標(biāo)簽時，需要給input指定其type為radio的同時添加一樣的name值，否則無法達到多選一的效果
radio標(biāo)簽繼續(xù)使用v-model雙向綁定，但是切換時data中的sex字段并沒有數(shù)據(jù)，這是因為radio類型下的input沒有一個入口用于輸入，必須給它指定默認的value值
相同的name值以及value值配置好后，即可實現(xiàn)效果
性別: 男<input type="radio" v-model="sex" name="sex" value="男" /> 女<input type="radio" v-model="sex" name="sex" value="女" />
1.3 checkbox
使用checkbox時是不是跟上述一樣的步驟呢?畢竟用的都是input標(biāo)簽，只不過修改了其type值而已。
年級: 一年級<input type="checkbox" value="一年級" v-model="grade" /> 二年級<input type="checkbox" value="二年級" v-model="grade" /> 三年級<input type="checkbox" value="三年級" v-model="grade" />
夢想是美好的，現(xiàn)實是殘酷的，checkbox標(biāo)簽的表現(xiàn)讓我們大失所望，不僅獲取到的數(shù)據(jù)類型不對，而且不管是點擊三個中的哪一個，他都是一起選中，一起取消，仿佛一個共同體
這是因為在data中年級字段的定義使用的字符類型，這里需要改成數(shù)組類型的字段屬性，效果就達成了
1.4 select
當(dāng)使用select標(biāo)簽時，保持v-model標(biāo)簽即可
班級:
<select v-model="className">
<option>請選擇班級</option>
<option>一班</option>
<option>二班</option>
<option>三班</option>
</select>需要讓其默認選中，在data中對其字段進行賦值即可
1.5 textarea
textarea文本域標(biāo)簽看著就沒有那么多花里胡哨的把式，跟默認的input框一樣即可正常獲取數(shù)據(jù)
簡介: <textarea v-model="desc"></textarea>
1.6 表單提交
表單元素中的數(shù)據(jù)都能獲取到后，如何將其在控制臺進行打印輸出呢?可以看到如下圖，當(dāng)在form表單中點擊按鈕時頁面會刷新，這是因為提交后默認的動作就是跳轉(zhuǎn)頁面
如何避免頁面刷新呢?這里需要給form標(biāo)簽綁定vue中的prevent事件并綁定對應(yīng)的函數(shù)
<form @submit.prevent="test"> </form>
通過在函數(shù)中打印this._data的方式進行輸出
但是每次取值時都這樣去獲取_data，是不太優(yōu)雅的行為，建議用一個對象將這些字段都裝進去，在取值時直接取這個對象
這樣也要付出相對應(yīng)的代價，就是在頁面上雙向綁定的地方都得給它加上對應(yīng)的前綴
1.7 表單修飾符
在Vue中，修飾符處理了許多DOM事件的細節(jié)
number修飾符
number修飾符，對類型進行轉(zhuǎn)換，轉(zhuǎn)為有效的數(shù)字，避免提交時的數(shù)據(jù)帶上雙引號導(dǎo)致錯誤
<label for="height">身高:</label> <input type="number" id="height" v-model.number="info.height" />
lazy修飾符
添加lazy修飾符，在失去焦點的一瞬間再獲取數(shù)據(jù)，不是實時獲取。少量數(shù)據(jù)時效果不明顯，如果是富文本且需要修改的內(nèi)容是大量的那效果是很顯著的
<textarea v-model.lazy="info.desc"></textarea>
trim修飾符
trim顧名思義同時也很常見，去除首尾空格，字符中間的空格無法去除
<input type="text" v-model.trim="info.number" id="number" autocomplete="off" />
總結(jié)
到此這篇關(guān)于Vue如何獲取表單數(shù)據(jù)的文章就介紹到這了,更多相關(guān)Vue獲取表單數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
VUE中Echarts的resize事件報錯和移除windows的事件問題
這篇文章主要介紹了VUE中Echarts的resize事件報錯和移除windows的事件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
解決vue項目報錯webpackJsonp is not defined問題
下面小編就為大家分享一篇解決vue項目報錯webpackJsonp is not defined問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家介紹了關(guān)于vue.js Router中嵌套路由的相關(guān)資料,所謂嵌套路由就是路由里面嵌套他的子路由,文章通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-06-06
在本篇文章里小編給大家整理了一篇關(guān)于Vue首屏性能優(yōu)化組件知識點總結(jié)，有需要的朋友們可以跟著學(xué)習(xí)下。2021-11-11
vue3 ElementUI 日期禁選當(dāng)日前當(dāng)日后三天后的實現(xiàn)代碼
這篇文章主要介紹了vue3 ElementUI 日期禁選當(dāng)日前當(dāng)日后三天后的實現(xiàn)代碼,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-05-05
websocket+Vuex實現(xiàn)一個實時聊天軟件
這篇文章主要利用websocked 建立長連接，利用Vuex全局通信的特性，以及watch,computed函數(shù)監(jiān)聽消息變化，并驅(qū)動頁面變化實現(xiàn)實時聊天，感興趣的可以了解一下2021-08-08
Vue 中使用vue2-highcharts實現(xiàn)top功能的示例
下面小編就為大家分享一篇Vue 中使用vue2-highcharts實現(xiàn)top功能的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue3實現(xiàn)富文本內(nèi)容導(dǎo)出為Word文檔
這篇文章主要為大家詳細介紹了Vue3如何通過純前端方案將富文本內(nèi)容直接導(dǎo)出為符合中文排版規(guī)范的 Word 文檔,有需要的小伙伴可以參考下2025-03-03
本文主要介紹了element中el-table與el-form同用并校驗，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要為大家詳細介紹了vue+echarts封裝氣泡圖的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08