使用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;//鼠標禁用
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)的操作代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
vue?cesium加載點與定位到指定位置的實現(xiàn)方法
Cesium是一個用于創(chuàng)建高性能、跨平臺的3D地球和地圖的開源JavaScript庫,它提供了許多功能,包括地理空間數(shù)據(jù)可視化、地理定位和地圖導航等,這篇文章主要介紹了vue?cesium加載點與定位到指定位置,需要的朋友可以參考下2024-03-03
vue2+tracking實現(xiàn)PC端的人臉識別示例
本文主要介紹了vue2+tracking實現(xiàn)PC端的人臉識別示例,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05
解決ant Design中Select設置initialValue時的大坑
這篇文章主要介紹了解決ant Design中Select設置initialValue時的大坑,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
element-vue實現(xiàn)網(wǎng)頁鎖屏功能(示例代碼)
這篇文章主要介紹了element-vue實現(xiàn)網(wǎng)頁鎖屏功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
使用element-ui,el-row中的el-col數(shù)據(jù)為空頁面布局變亂問題
這篇文章主要介紹了使用element-ui,el-row中的el-col數(shù)據(jù)為空頁面布局變亂問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
element?ui?watch?el-input賦值之后無法刪除或修改問題
這篇文章主要介紹了element?ui?watch?el-input賦值之后無法刪除或修改問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue實現(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

