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