實(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ì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！