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

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

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

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

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

開始前的準備，在目錄下創(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>
    <!-- 準備好一個容器 -->
    <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雙向綁定即可

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

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

<label for="number">學號:</label>
<input type="text" v-model="number" id="number" autocomplete="off" />

1.2 radio

在使用radio標簽時，需要給input指定其type為radio的同時添加一樣的name值，否則無法達到多選一的效果

radio標簽繼續(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標簽，只不過修改了其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標簽的表現(xiàn)讓我們大失所望，不僅獲取到的數(shù)據(jù)類型不對，而且不管是點擊三個中的哪一個，他都是一起選中，一起取消，仿佛一個共同體

這是因為在data中年級字段的定義使用的字符類型，這里需要改成數(shù)組類型的字段屬性，效果就達成了

1.4 select

當使用select標簽時，保持v-model標簽即可

班級:
<select v-model="className">
    <option>請選擇班級</option>
    <option>一班</option>
    <option>二班</option>
    <option>三班</option>
</select>

需要讓其默認選中，在data中對其字段進行賦值即可

1.5 textarea

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

簡介:
<textarea v-model="desc"></textarea>

1.6 表單提交

表單元素中的數(shù)據(jù)都能獲取到后，如何將其在控制臺進行打印輸出呢?可以看到如下圖，當在form表單中點擊按鈕時頁面會刷新，這是因為提交后默認的動作就是跳轉(zhuǎn)頁面

如何避免頁面刷新呢?這里需要給form標簽綁定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)文章

最新評論