Explication détaillée de vue obtenant la valeur d'entrée d'entrée

Cet article présente principalement des informations pertinentes sur la façon de résoudre le problème de l'obtention de la valeur d'entrée par Vue. J'espère que cet article pourra aider tout le monde et permettre à tous les amis qui en ont besoin de s'y référer. tout le monde.

Solution au problème de vue obtenant la valeur d'entrée

Il existe plusieurs lignes de zones de saisie dans v-for Comment vue peut-elle obtenir la valeur d'entrée d'un certain. ligne ? Écrivez simplement. J'ai ajouté du code, ce qui signifie qu'une collection de listes multilignes est renvoyée en arrière-plan. La page affiche une zone de saisie multiligne. Lorsque la valeur d'une certaine ligne est modifiée, une vérification est effectuée lors de la saisie. une invite conviviale, un bouton d'effacement est ajouté à la fin. Cliquez pour effacer la ligne actuelle de données, l'idée initiale est d'utiliser v-bind:value pour lier la valeur. sur la page ne peut pas être obtenu. v-bind ne modifiera pas la valeur dans la liste d'origine, et ref ne peut pas être lié dynamiquement. Certainement, ref ne peut être obtenu que dans son intégralité, this.$refs.itemPriceRef[], qui prend les valeurs. ​​​​de toutes les zones de saisie. C'est un tableau et peut être vérifié avant la soumission. Cependant, il est impossible de déterminer une certaine ligne d'opérations, et Vue exploite les éléments DOM très rapidement. d'informations mais je n'ai pas trouvé de moyen d'obtenir la valeur. Enfin, j'ai trouvé que le problème était résolu en liant directement la valeur de la liste avec v-model. De cette façon, la valeur de la liste sera directement modifiée lorsque. modifier, et il n'y aura aucune entrée. La valeur est différente de la valeur d'origine. VUE est très pratique pour lier les valeurs. Je viens de commencer à apprendre Vue et je ne maîtrise pas cette méthode. beaucoup de temps, mais j'ai aussi beaucoup appris.

PS : Résumé de 3 façons d'obtenir la valeur de la zone de saisie sur la page. La première consiste à utiliser v-bind:value + ref. Cette méthode ne convient qu'à des zones de saisie spécifiques.

Par exemple, la page de connexion n'a qu'une zone de saisie de compte et de mot de passe

2 est obtenu en utilisant v-model. Cette méthode modifie la valeur de la liste d'origine, donc lors de la soumission, vous devez parcourir l'original. list, ce qui est un peu gênant.

3 utilise v-model + ref, c'est comme ça que je l'ai écrit. La différence avec 2 est que lors de la soumission, ref est utilisé directement pour obtenir la valeur, ce qui semble plus. utile quand il y a un nombre inconnu de zones de saisie

Je l'ai juste résumé avec désinvolture Cela ne vaut peut-être pas la peine d'être mentionné aux yeux des maîtres, mais pour moi, une personne qui viens d'apprendre Vue, cela m'a gaspillé. longtemps.

Prenez le temps de l'enregistrer.

<p v-model="skuList" v-for="(val, key) in skuList "> 
<p> 
<p> 
<span>价格：</span> 
<span><input type="text" v-model="val.price" ref="priceRef" v-on:change="checkPrice(val)"></span>

<pre name="code" class="html"><i v-on:click="dataClearStockPrice(val)"></i>

上限： >

<span style="font-family:Arial, Helvetica, sans-serif;"><i v-on:click="dataClearStockTotal(val)"></i> 
</span></p> 
</p> 
</p>

    checkPrice:function (data) { 
    var priceReg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/; 
    if(!priceReg.test(data.price)){ 
     Toast({message: "格式错误"}); 
     data.price = ""; 
    } 
   }, 
   checkStock:function (data) { 
    var totalReg = /^[0-9]*$/; 
    if(!totalReg.test(data.stock)){ 
     Toast({message: "格式错误"}); 
     data.stock = ""; 
    } 
   }， 
   dataClearStockPrice:function(data){ 
    data.price = ''; 
   }, 
   dataClearStockTotal:function(data){ 
    data.stock = ''; 
   },

Recommandations associées :

À propos de la méthode attr dans Méthode jQuery et prop pour obtenir la méthode d'opération d'attribut vérifié de l'entrée

Diverses façons pour jquery d'obtenir la valeur dans l'entrée type=text

PHP pour obtenir une entrée La valeur dans la zone de saisie est comparée à la base de données et affichée

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!