Comment obtenir la valeur en vue

Vue est un framework de développement Web populaire qui fournit du sucre syntaxique pour une liaison bidirectionnelle. Dans Vue, nous pouvons facilement obtenir les données de la page et répondre à ses modifications en temps réel. Cet article explorera comment obtenir des valeurs dans Vue.

Il existe deux manières principales d'obtenir des valeurs dans Vue, l'une consiste à utiliser des instructions et l'autre à utiliser des propriétés calculées.

Utiliser les instructions pour obtenir des valeurs

Vue fournit des instructions pour obtenir facilement des valeurs d'entrée, de sélection et d'autres types sur la page.

Directive v-model

La directive v-model est la directive la plus couramment utilisée pour obtenir des valeurs dans Vue. Elle peut être utilisée pour lier la valeur des éléments de formulaire et mettre automatiquement à jour les données lorsque l'utilisateur entre. Par exemple, dans le code suivant, nous utilisons la directive v-model pour lier la valeur de la zone de saisie à la propriété message dans l'objet de données :

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

Maintenant, lorsque vous saisissez du texte dans la zone de saisie, Vue se mettra automatiquement à jour en arrière-plan La valeur de l'attribut de message dans data est également affichée dans la balise p.

Directive v-bind

La directive v-bind peut être utilisée pour lier dynamiquement une ou plusieurs propriétés dans un modèle. Par exemple, dans le code suivant, nous utilisons v-bind pour lier l'attribut href de la balise a à l'attribut url dans l'objet de données :

<div id="app">
  <a v-bind:href="url">Vue.js</a>
</div>

var app = new Vue({
  el: '#app',
  data: {
    url: 'https://vuejs.org/'
  }
})

la directive v-on

la directive v-on peut être utilisée pour lier des événements . Par exemple, dans le code suivant, nous utilisons v-on pour lier l'événement click de la balise bouton. Lorsque le bouton est cliqué, Vue appellera automatiquement la méthode d'incrémentation dans l'objet de données :

<div id="app">
  <button v-on:click="increment">{{ count }}</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment: function () {
      this.count++
    }
  }
})

Utilisez les propriétés calculées pour obtenir le. value

Dans Dans Vue, nous pouvons également utiliser des propriétés calculées pour obtenir des valeurs. Une propriété calculée est une propriété dotée d'un mécanisme de mise en cache dont la valeur est basée sur les calculs d'autres données. Il est automatiquement recalculé lorsque les données sur lesquelles il repose changent.

Utilisation de base des propriétés calculées

Par exemple, dans le code suivant, nous déclarons une propriété calculée appelée reverseMessage, dont la valeur est la chaîne inverse de la propriété message dans l'objet de données :

<div id="app">
  <input v-model="message">
  <p>{{ reversedMessage }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

de la propriété calculée get et set méthodes

En plus de définir la valeur d'une propriété calculée via la méthode get, nous pouvons également définir la valeur d'une propriété calculée via la méthode set. Par exemple, dans le code ci-dessous, nous déclarons une propriété calculée appelée fullName dont la valeur est la concaténation des propriétés firstName et lastName dans l'objet de données. Lorsque nous modifions la valeur de fullName, Vue appellera automatiquement la méthode set pour mettre à jour les propriétés firstName et lastName dans l'objet de données en même temps :

<div id="app">
  <input v-model="firstName">
  <input v-model="lastName">
  <p>{{ fullName }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

Summary

Dans Vue, nous pouvons utiliser v-model, v-bind , v- Sur et d'autres instructions pour obtenir les données sur la page, vous pouvez également utiliser des propriétés calculées pour calculer les données afin de générer de nouvelles valeurs. Grâce à ces méthodes, Vue fournit un moyen très pratique d'obtenir des données, nous permettant de répondre facilement aux différents besoins de l'entreprise.

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!