實現效果：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
//監聽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 } }}總結
以上所述是小編給大家介紹的使用vue與jquery實時監聽用戶輸入狀態的操作代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
