Comment convertir la valeur liée au v-model dans vue en variable

Convertir la valeur de chaîne liée au v-model via l'attribut calculé : créez un attribut calculé pour convertir la valeur de chaîne en variable. Utilisez l'attribut calculé dans v-model. Exemple : v-model se lie à la propriété calculée convertValue pour convertir une chaîne en entier. Chaque fois que le champ de saisie est modifié, convertValue calcule et met à jour la valeur des données myValue.

Comment lier une chaîne à une variable à l'aide de v-model dans Vue

Dans Vue, la directive v-model peut être utilisée pour créer une liaison de données bidirectionnelle entre les éléments de formulaire et les objets de données Vue. Lorsque v-model est lié à une chaîne, il analyse automatiquement la valeur d'entrée dans une chaîne. Cependant, nous devons parfois convertir la valeur liée en variable.

Méthode : Utilisation de la propriété calculée

La propriété calculée dans Vue vous permet de calculer dynamiquement de nouvelles valeurs à partir d'objets de données existants. Pour convertir la valeur de chaîne liée au v-model, vous pouvez suivre les étapes suivantes :

1. Créer un attribut calculé :

   computed: {
     convertedValue: function() {
       // 将 v-model 绑定的字符串值转换为变量
       return parseInt(this.myValue);
     }
   }

2. Utiliser l'attribut calculé dans le v-model :

   <input v-model="convertedValue">

Maintenant, Chaque fois que le champ d'entrée est modifié, la propriété calculée convertValue est évaluée, convertissant la chaîne d'entrée en entier et mettant à jour la valeur dans l'objet de données Vue.

Exemple :

const app = new Vue({
  data() {
    return {
      myValue: '10'
    }
  },
  computed: {
    convertedValue: function() {
      return parseInt(this.myValue);
    }
  }
});

Dans ce code, v-model est lié à la propriété calculée convertValue, qui convertit la valeur de chaîne liée dans l'objet de données myValue en un entier. Lorsque l'utilisateur modifie le champ de saisie, la valeur de convertValue est mise à jour, ce qui entraîne également la mise à jour de la propriété de données myValue.

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!