vue and jquery monitor user input status code sharing in real time

This article mainly shares with you the use of vue and jquery to monitor the user input status in real time. The effect is that when the input value is not entered, the button is disabled. Please refer to this article for the specific operation code. I hope it can help you.

Achievement effect: input value is not entered, button is disabled

jquery operation code:

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 operation code:

html

##

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

js

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

Related recommendations:

Jquery real-time monitoring input value example

js and jquery real-time monitoring of the oninput and onpropertychange methods of the input box value

js real-time monitoring of the text box State method_javascript skills

The above is the detailed content of vue and jquery monitor user input status code sharing in real time. For more information, please follow other related articles on the PHP Chinese website!