vue und jquery überwachen die gemeinsame Nutzung von Benutzereingabestatuscodes in Echtzeit

In diesem Artikel erfahren Sie hauptsächlich, wie Sie mit vue und jquery den Benutzereingabestatus in Echtzeit überwachen. Der Effekt besteht darin, dass die Schaltfläche deaktiviert ist . Ich hoffe, es kann Ihnen helfen.

Erfolgseffekt: Eingabewert wird nicht eingegeben, Schaltfläche ist deaktiviert

jquery-Operationscode:

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-Operationscode :

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
     }
  }
}

Verwandte Empfehlungen :

Instanz der JQuery-Überwachung des Eingabewerts in Echtzeit

Oninput- und Onpropertychange-Methoden von JS und JQuery, die den Eingabefeldwert in Echtzeit überwachen

JS-Methode zur Überwachung des Textfeldstatus in Echtzeit_Javascript-Kenntnisse

Das obige ist der detaillierte Inhalt vonvue und jquery überwachen die gemeinsame Nutzung von Benutzereingabestatuscodes in Echtzeit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!