使用vue與jquery實(shí)時(shí)監(jiān)聽用戶輸入狀態(tài)的操作代碼
實(shí)現(xiàn)效果:input未輸入值,按鈕禁用
jquery操作代碼:
html
<input type="text" name="" placeholder="請(qǐng)輸入用戶名" id="userName" > <button class="disabled" id="login">登錄</button>
css
.disabled { pointer-events: none;//禁用點(diǎn)擊事件 cursor: default;//鼠標(biāo)禁用 opacity: 0.4; }
js
//監(jiān)聽input里的值 $('#userName').on('input propertychange',function(){ if(this.value.length != 0){ $('#login').removeClass('disabled'); }else{ $('#login').addClass('disabled'); } });
Vue操作代碼:
html
<template> <div> <input type="text" placeholder="請(qǐng)輸入用戶名" v-model="userName"> <button :disabled="forbidden" >登錄</button> </div> </template>
js
export default{ data(){ return{ forbidden:false, userName:null } }, methods:{ if(this.userName == null){ this.forbidden = true; }else{ this.forbidden = false } } }
總結(jié)
以上所述是小編給大家介紹的使用vue與jquery實(shí)時(shí)監(jiān)聽用戶輸入狀態(tài)的操作代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
vue?cesium加載點(diǎn)與定位到指定位置的實(shí)現(xiàn)方法
Cesium是一個(gè)用于創(chuàng)建高性能、跨平臺(tái)的3D地球和地圖的開源JavaScript庫(kù),它提供了許多功能,包括地理空間數(shù)據(jù)可視化、地理定位和地圖導(dǎo)航等,這篇文章主要介紹了vue?cesium加載點(diǎn)與定位到指定位置,需要的朋友可以參考下2024-03-03vue2+tracking實(shí)現(xiàn)PC端的人臉識(shí)別示例
本文主要介紹了vue2+tracking實(shí)現(xiàn)PC端的人臉識(shí)別示例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05解決ant Design中Select設(shè)置initialValue時(shí)的大坑
這篇文章主要介紹了解決ant Design中Select設(shè)置initialValue時(shí)的大坑,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10element-vue實(shí)現(xiàn)網(wǎng)頁(yè)鎖屏功能(示例代碼)
這篇文章主要介紹了element-vue實(shí)現(xiàn)網(wǎng)頁(yè)鎖屏功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11使用element-ui,el-row中的el-col數(shù)據(jù)為空頁(yè)面布局變亂問題
這篇文章主要介紹了使用element-ui,el-row中的el-col數(shù)據(jù)為空頁(yè)面布局變亂問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08element?ui?watch?el-input賦值之后無法刪除或修改問題
這篇文章主要介紹了element?ui?watch?el-input賦值之后無法刪除或修改問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02Vue實(shí)現(xiàn)調(diào)節(jié)窗口大小時(shí)觸發(fā)事件動(dòng)態(tài)調(diào)節(jié)更新組件尺寸的方法
今天小編就為大家分享一篇Vue實(shí)現(xiàn)調(diào)節(jié)窗口大小時(shí)觸發(fā)事件動(dòng)態(tài)調(diào)節(jié)更新組件尺寸的方法。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09