Comment utiliser les attributs dans les données en vue

Vue est un framework MVVM frontal. Sa fonctionnalité principale est la liaison de données bidirectionnelle, c'est-à-dire que les modifications apportées à la couche de vue seront automatiquement reflétées dans la couche de données et que les modifications dans la couche de données mettront automatiquement à jour la couche de vue. Dans Vue, nous utilisons l'attribut data pour stocker des données, qui peuvent être référencées par des modèles et affichées dans la couche de vue.

Alors, comment utilisons-nous les attributs dans l'attribut de données de Vue ? Cet article présentera en détail comment utiliser les attributs dans l'attribut data dans Vue.

Comment définir un attribut de données dans Vue

Tout d'abord, nous devons comprendre comment définir un attribut de données dans Vue. Dans le composant Vue, nous devons ajouter un attribut data aux propriétés du composant et le définir sur une fonction. Cette fonction renvoie un objet contenant des données dans lequel nous pouvons définir les propriétés que nous devons utiliser.

Voici un exemple simple qui définit un composant Vue nommé "person" et un attribut nommé "name" dans l'attribut data :

<template>
  <div>{{ name }}</div>
</template>

<script>
export default {
  name: "person",
  data() {
    return {
      name: "张三"
    };
  }
};
</script>

Dans le code ci-dessus, nous définissons dans l'attribut data Créer un attribut nommé "name" et initialisez-le à "Zhang San". Nous pouvons afficher cette valeur en utilisant l'attribut "name" dans le modèle.

Ensuite, lors de la définition de l'attribut data, nous pouvons utiliser un objet contenant plusieurs attributs. Par exemple :

data() {
    return {
      name: "张三",
      age: 18,
      gender: "male"
    };
  }

Dans le code ci-dessus, nous définissons trois attributs dans l'attribut data : nom, âge et sexe, et les initialisons à des valeurs différentes.

Référez-vous à l'attribut data dans le modèle Vue

Dans la définition du composant Vue, nous pouvons référencer l'attribut data dans le modèle, par exemple :

<script>
export default {
  data() {
    return {
      name: &quot;张三&quot;,
      age: 18,
      gender: &quot;male&quot;
    };
  }
};
</script>

Dans le code ci-dessus, nous avons référencé le nom et l'âge dans l'attribut data dans le modèle respectivement et les attributs de genre, et utilisez "{{}}" pour les utiliser comme variables. Lorsque les données changent, les valeurs de ces variables sont mises à jour en conséquence.

Changer la valeur de l'attribut data

Dans Vue, nous utilisons Vue.set ou vm.$set pour ajouter dynamiquement de nouveaux attributs à l'attribut data :

Vue.set(vm, 'age', 19);

Dans le code ci-dessus, la méthode Vue.set ajoute un un nouvel attribut age est ajouté à l'attribut data de vm et sa valeur initiale est 19. De même, nous pouvons également utiliser vm.$set pour effectuer la même opération.

De plus, nous pouvons également utiliser Vue.delete ou vm.$delete pour supprimer les attributs dans l'attribut data :

Vue.delete(vm, 'age');

Dans le code ci-dessus, la méthode Vue.delete supprime l'attribut age dans l'attribut data de vm donc qu'il n'existe pas.

Conclusion

Ce qui précède concerne la façon d'utiliser les attributs dans l'attribut de données de Vue. L'utilisation de l'attribut data de Vue nous permet de stocker et de gérer les données plus facilement et plus rapidement, et le processus d'affichage des données est également très simple.

Cependant, nous devons également noter que lors de la modification de la valeur de l'attribut data dans Vue, nous devons suivre le principe du flux de données unidirectionnel et utiliser les méthodes fournies par Vue pour les opérations sur les données, qui peuvent mieux maintenir la lisibilité de le code et la stabilité.

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!