Comment obtenir la valeur des données dans vue

Vue.js est un framework JavaScript populaire largement utilisé dans le domaine du développement front-end. Dans Vue, obtenir des valeurs de données est un concept très important. Vue fournit une série de méthodes pour obtenir des valeurs de données, notamment l'obtention de la valeur dans les données, l'obtention de la valeur calculée et l'obtention de la valeur dans les accessoires. Dans cet article, nous détaillerons ces méthodes d'obtention de valeurs de données.

1. Obtenez la valeur dans data

Dans l'instance Vue, nous pouvons accéder à l'objet de données via this.$data. Par exemple :

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="getData">获取数据</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      msg: 'Hello World!'
    }
  },
  methods: {
    getData() {
      console.log(this.$data.msg)
    }
  }
}
</script>

Dans le code ci-dessus, nous avons défini l'attribut msg dans data et y avons accédé via this.$data.msg. De cette façon, nous pouvons obtenir toutes les valeurs d'attribut dans l'objet de données.

2. Obtenir la valeur calculée

calculée est un concept très utile dans Vue. Une propriété calculée est réactive et est automatiquement recalculée lorsque les propriétés dont elle dépend changent. Lors de l'obtention des valeurs des propriétés calculées, nous pouvons y accéder directement. Par exemple :

<template>
  <div>
    <p>{{msg}}</p>
    <button @click="getData">获取数据</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      name: 'Lucy',
      age: 18
    }
  },
  computed: {
    msg() {
      return `我的名字是${this.name}，我今年${this.age}岁了。`
    }
  },
  methods: {
    getData() {
      console.log(this.msg)
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons un attribut calculé msg, qui est utilisé pour calculer une chaîne. Nous accédons à la valeur de cette propriété calculée directement via this.msg.

3. Obtenez la valeur dans props

Lorsque nous utilisons Vue pour développer des composants, nous pouvons définir l'attribut props dans le composant et y transmettre des données. Lors de l'obtention de la valeur dans les accessoires, nous pouvons y accéder directement via l'objet props. Par exemple :

<template>
  <div>
    <p>{{msg}}</p>
  </div>
</template>
 
<script>
export default {
  props: {
    name: String,
    age: Number
  },
  computed: {
    msg() {
      return `我的名字是${this.name}，我今年${this.age}岁了。`
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons deux attributs d'accessoires name et age, qui sont respectivement des types chaîne et numérique. Nous accédons à leurs valeurs via this.name et this.age.

4. Résumé

Dans Vue, obtenir des valeurs de données est un concept très important. Nous pouvons accéder à toutes les valeurs de propriété dans l'objet de données via this.$data, obtenir la valeur de la propriété calculée en accédant directement à la propriété calculée et obtenir les données transmises par le composant parent via l'objet props. Ces méthodes peuvent nous aider à obtenir des valeurs de données plus facilement et à rendre le développement front-end plus efficace.

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!