vue与jquery实时监听用户输入状态

实现效果：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
         }
    }
}
      

两个例子，仅供参考