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

vue中關(guān)于trigger的用法

 更新時(shí)間:2022年08月09日 11:30:12   作者:萌奈加油努力  
這篇文章主要介紹了vue中關(guān)于trigger的用法說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

關(guān)于trigger的用法

  • trigger: "blur": 失去焦點(diǎn)時(shí)觸發(fā)
newPassword: [
          { required: true, message: "新密碼不能為空", trigger: "blur" },
          { min: 6, max: 20, message: "長度在 6 到 20 個(gè)字符", trigger: "blur" }
        ]

當(dāng)鼠標(biāo)點(diǎn)擊輸入框外時(shí)顯示“新密碼不能為空”:

還有一個(gè):

  • trigger: "change":  數(shù)據(jù)改變時(shí)觸發(fā),道理跟上面類似

vue的一些易混淆事件整理 - @change | trigger: 'blur' |

onchange onpropertychange 和 oninput 事件的區(qū)別

1、onchange 事件與 onpropertychange 事件的區(qū)別:

  • onchange 事件在內(nèi)容改變(兩次內(nèi)容有可能還是相等的)且失去焦點(diǎn)時(shí)觸發(fā)。
  • onpropertychange 事件卻是實(shí)時(shí)觸發(fā),即每增加或刪除一個(gè)字符就會(huì)觸發(fā),通過 js 改變也會(huì)觸發(fā)該事件,但是該事件 IE 專有。

2、oninput 事件與 onpropertychange 事件的區(qū)別:

  • oninput 事件是 IE 之外的大多數(shù)瀏覽器支持的事件,在 value 改變時(shí)觸發(fā),實(shí)時(shí)的,即每增加或刪除一個(gè)字符就會(huì)觸發(fā),然而通過 js 改變 value 時(shí),卻不會(huì)觸發(fā)。
  • onpropertychange 事件是任何屬性改變都會(huì)觸發(fā)的,而 oninput 卻只在 value 改變時(shí)觸發(fā),oninput 要通過 addEventListener() 來注冊(cè),onpropertychange 注冊(cè)方式跟一般事件一樣。(此處都是指在js中動(dòng)態(tài)綁定事件,以實(shí)現(xiàn)內(nèi)容與行為分離)

3、oninputonpropertychange 失效的情況:

  • (1)oninput 事件:a). 當(dāng)腳本中改變 value 時(shí),不會(huì)觸發(fā);b).從瀏覽器的自動(dòng)下拉提示中選取時(shí),不會(huì)觸發(fā)。
  • (2)onpropertychange 事件:當(dāng) input 設(shè)置為 disable=true后,onpropertychange 不會(huì)觸發(fā)。

@change

手動(dòng)輸入或者通過彈出框選擇之后觸發(fā) 

@change='handleChange'

trigger: ‘blur’

  • trigger: ‘blur’ 表示“當(dāng)失去焦點(diǎn)時(shí)(光標(biāo)不顯示的時(shí)候),觸發(fā)此提示”

此處應(yīng)該是有一個(gè)校驗(yàn),若失去焦點(diǎn),則觸發(fā)trigger進(jìn)行校驗(yàn),若校驗(yàn)不成功,則進(jìn)行提示

//組件
<el-form :model="form" :rules="rules" ref="groupForm"></el-form>
//JavaScript
rules:{
        code: [
          {required: true, message: '請(qǐng)輸入?。。。。? trigger: 'blur'}
        ],
        name: [
          {required: true, message: '輸入?。。。?!', trigger: 'blur'}
        ]
      }

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

相關(guān)文章

  • vue使用video.js進(jìn)行視頻播放功能

    vue使用video.js進(jìn)行視頻播放功能

    video.js是一個(gè)擁有h5背景的網(wǎng)絡(luò)視頻播放器,同時(shí)支持h5以及Flash視頻播放,這篇文章主要介紹了vue中使用video.js進(jìn)行視頻播放,需要的朋友可以參考下
    2019-07-07
  • vue-router 導(dǎo)航鉤子的具體使用方法

    vue-router 導(dǎo)航鉤子的具體使用方法

    本篇文章主要介紹了vue-router 導(dǎo)航鉤子的具體使用方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-08-08
  • 淺析Vue 生命周期

    淺析Vue 生命周期

    這篇文章主要介紹了Vue 生命周期的過程,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-06-06
  • vue頁面引入three.js實(shí)現(xiàn)3d動(dòng)畫場景操作

    vue頁面引入three.js實(shí)現(xiàn)3d動(dòng)畫場景操作

    這篇文章主要介紹了vue頁面引入three.js實(shí)現(xiàn)3d動(dòng)畫場景操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue中的導(dǎo)航守衛(wèi)使用及說明

    vue中的導(dǎo)航守衛(wèi)使用及說明

    這篇文章主要介紹了vue中的導(dǎo)航守衛(wèi)使用及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • Vue路由之JWT身份認(rèn)證的實(shí)現(xiàn)方法

    Vue路由之JWT身份認(rèn)證的實(shí)現(xiàn)方法

    這篇文章主要介紹了Vue路由之JWT身份認(rèn)證的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • Vue自定義加水波紋效果指令實(shí)例代碼

    Vue自定義加水波紋效果指令實(shí)例代碼

    這篇文章主要給大家介紹了關(guān)于Vue自定義加水波紋效果指令的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2022-02-02
  • 優(yōu)化Vue中date format的性能詳解

    優(yōu)化Vue中date format的性能詳解

    這篇文章主要介紹了優(yōu)化Vue中date format的性能詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-01-01
  • VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié))

    VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié))

    這篇文章主要介紹了VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié)),文中通過圖文表格介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-08-08
  • Vue3中Cesium地圖初始化及地圖控件配置方法

    Vue3中Cesium地圖初始化及地圖控件配置方法

    本文中,我們主要介紹Cesium在Vue3運(yùn)行環(huán)境的配置,及Cesium實(shí)例中控件的顯隱設(shè)置,本項(xiàng)目基于pnpm安裝,也可使用其他包管理器進(jìn)行安裝,如npm或yarn,本文通過示例代碼對(duì)vue初始化Cesium地圖相關(guān)知識(shí)介紹的非常詳細(xì),需要的朋友參考下吧
    2023-07-07

最新評(píng)論