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

实现效果：input未输入值，按钮禁用

jquery操作代码：

html

 登录

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

js

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

两个例子，仅供参考