Parlons de la façon d'utiliser Vue.js pour obtenir des valeurs sur la page

Vue.js est un framework front-end léger, facile à apprendre et à utiliser, composé de composants, efficace et flexible, il est donc très populaire dans le développement front-end. Lors de l'utilisation de Vue.js, nous devons souvent transmettre des données à la page et obtenir les données saisies par l'utilisateur sur la page Web. Dans cet article, nous verrons comment obtenir une valeur sur une page à l'aide de Vue.js.

1. La liaison de données de Vue.js

Vue.js réalise la mise à jour automatique des données et des éléments de page via la liaison de données. Par exemple, lors de la définition de données dans une instance Vue, nous pouvons utiliser des doubles accolades {{}} pour lier les données aux éléments de la page Web. Lorsque les données changent, les éléments de la page sont automatiquement mis à jour. Par exemple, le code suivant lie les données du message de l'instance Vue à un élément de la page Web.

<div id="app">
  <p>{{ message }}</p>
</div>

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

Dans l'exemple ci-dessus, nous avons défini une instance Vue et défini des données de message dans l'instance. Sur la page Web, nous lions les données à une balise p et définissons sa valeur initiale sur « Hello Vue ! ». Lorsque ces données changent, l'élément de la page est automatiquement mis à jour.

2. Instructions Vue.js

Les instructions Vue.js sont utilisées pour ajouter des comportements plus interactifs lors de la liaison des données. Y compris v-if, v-for, v-show, etc., les instructions Vue.js peuvent nous aider à implémenter plus de fonctions sur la page. La directive v-model de Vue.js est très puissante lorsqu'il s'agit d'obtenir des valeurs.

1. Utilisation de base de la directive v-model

Dans Vue.js, la directive v-model est utilisée pour créer une liaison de données bidirectionnelle entre les éléments de formulaire et les données. Par exemple, nous avons souvent besoin d'obtenir des données saisies par les utilisateurs sur des pages Web, et v-model peut simplifier ce processus. Le code suivant montre comment utiliser la directive v-model pour obtenir la valeur d'un élément d'entrée dans Vue.js.

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

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

Dans le code ci-dessus, nous définissons une zone de saisie et une balise p. Utilisez la directive v-model pour lier les données à la zone de saisie. Lorsque l'utilisateur saisit du contenu dans la zone de saisie, les données sont automatiquement mises à jour et mises à jour vers la balise p sur la page via le mécanisme de liaison de données de Vue.js.

2. Modificateurs pour la directive v-model

Dans Vue.js, la directive v-model peut également utiliser des modificateurs. Les modificateurs couramment utilisés incluent : .lazy, .number, .trim, etc. Par exemple, lorsque nous obtenons une entrée de l'utilisateur, nous pouvons utiliser le modificateur .trim pour supprimer les espaces saisis, comme indiqué ci-dessous :

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

Dans le code ci-dessus, utilisez le modificateur .trim pour supprimer les espaces saisis par l'utilisateur et attribuez le résultat aux données du message dans l'instance Vue.

3. Résumé

Dans Vue.js, les instructions de liaison de données et de modèle v sont généralement utilisées pour obtenir des valeurs. La liaison de données est utilisée pour implémenter des mises à jour automatiques sur la page tout en simplifiant l'opération d'obtention des valeurs. La directive v-model est un outil puissant pour créer une liaison de données bidirectionnelle entre les éléments de formulaire et les données. Les modificateurs peuvent gérer les entrées utilisateur de manière plus flexible. En maîtrisant ces compétences Vue.js, je pense que cela vous aidera à développer des pages frontales plus efficacement.

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!