使用vue与jquery实时监听用户输入状态的操作代码

<input type="text" name="" placeholder="请输入用户名" id="userName" > <button class="disabled" id="login">登录</button>

 .disabled {  pointer-events: none;//禁用点击事件  cursor: default;//鼠标禁用  opacity: 0.4;  }

//监听input里的值$('#userName').on('input propertychange',function(){   if(this.value.length != 0){      $('#login').removeClass('disabled');   }else{      $('#login').addClass('disabled');   } });

<template>  <div>       <input type="text" placeholder="请输入用户名" v-model="userName">       <button :disabled="forbidden" >登录</button>    </div></template>

export default{  data(){     return{       forbidden:false,       userName:null     }  },  methods:{     if(this.userName == null){       this.forbidden = true;     }else{       this.forbidden = false     }  }}