vue et jquery surveillent le partage de code d'état d'entrée utilisateur en temps réel

Cet article vous explique principalement comment utiliser vue et jquery pour surveiller l'état des entrées de l'utilisateur en temps réel. L'effet est que lorsqu'aucune valeur n'est saisie, le bouton est désactivé. Veuillez vous référer à cet article pour le code d'opération spécifique. J'espère que cela pourra vous aider.

Obtenir l'effet : la saisie n'entre pas de valeur, le bouton est désactivé

Code d'opération 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');
   }
 });

Code d'opération Vue :

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

Recommandations associées :

Instance de surveillance Jquery de la valeur d'entrée en temps réel

Méthodes Oninput et onpropertychange de js et jquery surveillant la valeur de la zone de saisie dans temps réel

Méthode JS pour surveiller l'état de la zone de texte en temps réel_compétences javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!