欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue如何獲取表單數(shù)據(jù)

 更新時(shí)間：2023年06月15日 11:51:03   作者：摔跤貓子  
我們?cè)谧龊笈_(tái)管理系統(tǒng)里面有非常多的表單需求,下面這篇文章主要給大家介紹了關(guān)于Vue如何獲取表單數(shù)據(jù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

表單用于搜集不同類型的用戶輸入，Vue針對(duì)不同的表單輸入類型，也提供了不同的的輸入控制及驗(yàn)證。

一、獲取表單數(shù)據(jù)

開(kāi)始前的準(zhǔn)備，在目錄下創(chuàng)建文件夾及對(duì)應(yīng)的頁(yè)面如下

<!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)備好一個(gè)容器 -->
    <div id="root">
    </div>
    <script type="text/javascript">
        //Vue.config.productionTip = false //阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。
        // 創(chuàng)建vue實(shí)例
        const vm = new Vue({
            el:'#root',
            //函數(shù)式
            data:function(){
                return{
                    info:{
                        name:'摔跤貓子',
                    }
                };
            }
        });
    </script>
</body>
</html>

1.1 input

默認(rèn)類型的input框通過(guò)前面幾章所介紹的v-model雙向綁定即可

這里再插一個(gè)小技巧，當(dāng)表單的內(nèi)容為左側(cè)標(biāo)題及右側(cè)文本框這樣的布局組成時(shí)，如何實(shí)現(xiàn)點(diǎn)擊標(biāo)題光標(biāo)自動(dòng)在右側(cè)的文本框選中呢?

只需要在左側(cè)標(biāo)題的label標(biāo)簽中添加一個(gè)for的同時(shí)指定一個(gè)名稱，同時(shí)在需要選中光標(biāo)的文本框設(shè)置相同的id值即可

<label for="number">學(xué)號(hào):</label>
<input type="text" v-model="number" id="number" autocomplete="off" />

1.2 radio

在使用radio標(biāo)簽時(shí)，需要給input指定其type為radio的同時(shí)添加一樣的name值，否則無(wú)法達(dá)到多選一的效果

radio標(biāo)簽繼續(xù)使用v-model雙向綁定，但是切換時(shí)data中的sex字段并沒(méi)有數(shù)據(jù)，這是因?yàn)閞adio類型下的input沒(méi)有一個(gè)入口用于輸入，必須給它指定默認(rèn)的value值

相同的name值以及value值配置好后，即可實(shí)現(xiàn)效果

性別:
男<input type="radio" v-model="sex" name="sex" value="男" />
女<input type="radio" v-model="sex" name="sex" value="女" />

1.3 checkbox

使用checkbox時(shí)是不是跟上述一樣的步驟呢?畢竟用的都是input標(biāo)簽，只不過(guò)修改了其type值而已。

年級(jí):
一年級(jí)<input type="checkbox" value="一年級(jí)" v-model="grade" />
二年級(jí)<input type="checkbox" value="二年級(jí)" v-model="grade" />
三年級(jí)<input type="checkbox" value="三年級(jí)" v-model="grade" />

夢(mèng)想是美好的，現(xiàn)實(shí)是殘酷的，checkbox標(biāo)簽的表現(xiàn)讓我們大失所望，不僅獲取到的數(shù)據(jù)類型不對(duì)，而且不管是點(diǎn)擊三個(gè)中的哪一個(gè)，他都是一起選中，一起取消，仿佛一個(gè)共同體

這是因?yàn)樵赿ata中年級(jí)字段的定義使用的字符類型，這里需要改成數(shù)組類型的字段屬性，效果就達(dá)成了

1.4 select

當(dāng)使用select標(biāo)簽時(shí)，保持v-model標(biāo)簽即可

班級(jí):
<select v-model="className">
    <option>請(qǐng)選擇班級(jí)</option>
    <option>一班</option>
    <option>二班</option>
    <option>三班</option>
</select>

需要讓其默認(rèn)選中，在data中對(duì)其字段進(jìn)行賦值即可

1.5 textarea

textarea文本域標(biāo)簽看著就沒(méi)有那么多花里胡哨的把式，跟默認(rèn)的input框一樣即可正常獲取數(shù)據(jù)

簡(jiǎn)介:
<textarea v-model="desc"></textarea>

1.6 表單提交

表單元素中的數(shù)據(jù)都能獲取到后，如何將其在控制臺(tái)進(jìn)行打印輸出呢?可以看到如下圖，當(dāng)在form表單中點(diǎn)擊按鈕時(shí)頁(yè)面會(huì)刷新，這是因?yàn)樘峤缓竽J(rèn)的動(dòng)作就是跳轉(zhuǎn)頁(yè)面

如何避免頁(yè)面刷新呢?這里需要給form標(biāo)簽綁定vue中的prevent事件并綁定對(duì)應(yīng)的函數(shù)

<form @submit.prevent="test">
</form>

通過(guò)在函數(shù)中打印this._data的方式進(jìn)行輸出

但是每次取值時(shí)都這樣去獲取_data，是不太優(yōu)雅的行為，建議用一個(gè)對(duì)象將這些字段都裝進(jìn)去，在取值時(shí)直接取這個(gè)對(duì)象

這樣也要付出相對(duì)應(yīng)的代價(jià)，就是在頁(yè)面上雙向綁定的地方都得給它加上對(duì)應(yīng)的前綴

1.7 表單修飾符

在Vue中，修飾符處理了許多DOM事件的細(xì)節(jié)

number修飾符

number修飾符，對(duì)類型進(jìn)行轉(zhuǎn)換，轉(zhuǎn)為有效的數(shù)字，避免提交時(shí)的數(shù)據(jù)帶上雙引號(hào)導(dǎo)致錯(cuò)誤

 <label for="height">身高:</label>
 <input type="number" id="height" v-model.number="info.height" />

lazy修飾符

添加lazy修飾符，在失去焦點(diǎn)的一瞬間再獲取數(shù)據(jù)，不是實(shí)時(shí)獲取。少量數(shù)據(jù)時(shí)效果不明顯，如果是富文本且需要修改的內(nèi)容是大量的那效果是很顯著的

<textarea v-model.lazy="info.desc"></textarea>

trim修飾符

trim顧名思義同時(shí)也很常見(jiàn)，去除首尾空格，字符中間的空格無(wú)法去除

<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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論