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

vue中如何去掉input前后的空格

 更新時間:2023年03月04日 13:51:50   作者:~?climber?~  
這篇文章主要介紹了vue中如何去掉input前后的空格問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

vue去掉input前后的空格

場景:在開發(fā)過程中,遇到表單填寫,用戶可以自由輸入

截圖舉例:

這里,用戶瞎輸,填了幾個空格,導(dǎo)致給后臺發(fā)請求的時候,也帶了好多空格,這種體驗特別不好。因此在開發(fā)過程中,要考慮去空格的問題。

在vue 2.x中,v-model.trim就可以搞定,截圖如下:

但是在vue1.x 中,v-model.trim 不生效,此時就不能這么改了。但是清楚底層原理,去掉字符串前后的空格原理就是v-model 的值,js里面trim方法就可以。

寫一個去除input框空格的vue指令

使用方法

使用方法

源碼

const handleBlurEvent = (e) => {
    e.target.value = e.target.value.trim();
    
	// 觸發(fā)原生input事件
    let event = document.createEvent('HTMLEvents');
    event.initEvent('input', true, true);
    e.target.dispatchEvent(event);
};

const bindInputBlurEvent = (node) => {
    if (node.tagName === 'INPUT') {
        node.onblur = handleBlurEvent;
    } else {
    	// 遞歸子節(jié)點
        Array.from(node.children).forEach((children) => {
            bindInputBlurEvent(children);
        });
    }
};

export default {
    bind(el) {
        bindInputBlurEvent(el);
    }
};

總結(jié)

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 前端設(shè)置cookie之vue-cookies使用及說明

    前端設(shè)置cookie之vue-cookies使用及說明

    這篇文章主要介紹了前端設(shè)置cookie之vue-cookies使用及說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • vue內(nèi)置動態(tài)組件component使用示例小結(jié)

    vue內(nèi)置動態(tài)組件component使用示例小結(jié)

    component是vue內(nèi)置組件,主要作用為動態(tài)渲染組件,這篇文章主要介紹了vue內(nèi)置動態(tài)組件component使用示例小結(jié),需要的朋友可以參考下
    2024-03-03
  • vite+ts vite.config.ts使用path報錯問題及解決

    vite+ts vite.config.ts使用path報錯問題及解決

    這篇文章主要介紹了vite+ts vite.config.ts使用path報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue 2.1.3 實時顯示當(dāng)前時間,每秒更新的方法

    vue 2.1.3 實時顯示當(dāng)前時間,每秒更新的方法

    今天小編就為大家分享一篇vue 2.1.3 實時顯示當(dāng)前時間,每秒更新的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 詳解vue使用插槽分發(fā)內(nèi)容slot的用法

    詳解vue使用插槽分發(fā)內(nèi)容slot的用法

    這篇文章主要介紹了vue使用插槽分發(fā)內(nèi)容slot的用法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • Vue3實現(xiàn)一個可左右滑動操作組件的示例代碼

    Vue3實現(xiàn)一個可左右滑動操作組件的示例代碼

    這篇文章主要為大家詳細(xì)介紹了如何利用Vue3實現(xiàn)一個可左右滑動操作組件,文中的示例代碼講解詳細(xì),對我們學(xué)習(xí)Vue有一定幫助,感興趣的可以學(xué)一下
    2022-11-11
  • vue3使用reactive賦值后頁面不改變

    vue3使用reactive賦值后頁面不改變

    本文主要介紹了vue3使用reactive賦值后頁面不改變,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • 基于Vue實現(xiàn)微信小程序的圖文編輯器

    基于Vue實現(xiàn)微信小程序的圖文編輯器

    這篇文章主要介紹了基于Vue實現(xiàn)微信小程序的圖文編輯器,由于微信小程序不能使用常規(guī)的圖文編輯器(比如百度的UEditor )編輯新聞內(nèi)容之類的,所以用vue寫了個針對小程序用的圖文編輯器需要的朋友可以參考下
    2018-07-07
  • vue2.X組件學(xué)習(xí)心得(新手必看篇)

    vue2.X組件學(xué)習(xí)心得(新手必看篇)

    下面小編就為大家?guī)硪黄獀ue2.X組件學(xué)習(xí)心得(新手必看篇)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • 通過命令行生成vue項目框架的方法

    通過命令行生成vue項目框架的方法

    本篇文章主要介紹了通過命令行生成vue項目框架的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07

最新評論