Comment écrire le vote en vue

Vue est un framework JavaScript populaire qui peut être utilisé pour créer des applications Web. En plus de ses fonctionnalités puissantes et de son API facile à utiliser, Vue fournit également un grand nombre de fonctions d'extension et de plug-ins qui permettent aux développeurs Web de développer rapidement diverses applications Web. Cet article vous montrera comment créer une application de vote simple à l'aide de Vue.js.

Étape 1 : Préparation

Avant de commencer à écrire du code, vous devez d'abord installer Vue.js. Vous pouvez utiliser le CDN ou npm de Vue pour télécharger le package d'installation afin d'installer Vue.js. De plus, vous aurez besoin d'un éditeur de texte, tel que Visual Studio Code, pour modifier les applications Vue.js.

Étape 2 : Créer l'application de vote

Après le travail de préparation, nous commençons ensuite les étapes de création de l'application de vote. Nous utiliserons Vue.js pour coder HTML, CSS et JavaScript.

Tout d'abord, nous créons un fichier HTML et ajoutons le code suivant :

<meta charset="utf-8">
<title>投票应用程序</title>
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <h1>{{ title }}</h1>
  <ul>
    <li v-for="option in options">
      {{ option }}
    </li>
  </ul>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      title: '我的投票应用程序',
      options: ['选项1', '选项2', '选项3']
    }
  })
</script>

< ; /body>

Dans le code HTML ci-dessus, nous avons défini une application Vue qui contient un modèle de base avec un titre et une liste d'options. Nous utilisons la directive v-for de Vue.js pour parcourir la liste des options et les ajouter à la page. De plus, nous avons défini deux propriétés de données pour l'application Vue : le titre et les options. Ces propriétés stockent les données que nous affichons sur la page.

Étape 3 : Ajouter une fonctionnalité de vote

Maintenant que nous avons une page de base, ajoutons une fonctionnalité de vote. Dans notre application de vote, nous utilisons la directive v-on de Vue.js pour implémenter la fonctionnalité de vote.

Afin d'implémenter la fonctionnalité de vote, nous devons définir un gestionnaire d'événements qui sera appelé lorsque l'utilisateur clique sur une option. Pour ce faire, nous modifions une propriété dans les propriétés de données de l'application Vue pour identifier quelle option a été sélectionnée. Nous utilisons également les propriétés calculées de Vue.js pour calculer la part des votes pour chaque option :

<meta charset="utf-8">
<title>投票应用程序</title>
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <h1>{{ title }}</h1>
  <ul>
    <li v-for="(option, index) in options" v-on:click="vote(index)">
      {{ option }}
      <span v-show="votes[index]">{{ votes[index] }} 票（{{ percentage(index) }}%）</span>
    </li>
  </ul>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      title: '我的投票应用程序',
      options: ['选项1', '选项2', '选项3'],
      votes: [0, 0, 0]
    },
    methods: {
      vote: function(index) {
        this.votes[index] += 1;
      }
    },
    computed: {
      totalVotes: function() {
        return this.votes.reduce(function(sum, vote) {
          return sum + vote;
        }, 0);
      },
      percentage: function(index) {
        if (this.votes[index] === 0) {
          return 0;
        }
        return Math.round(this.votes[index]/this.totalVotes * 100);
      }
    }
  })
</script>

Dans le code ci-dessus, nous mettons à jour la propriété data de l'application Vue pour inclure un tableau de votes qui stocke le nombre de votes pour chaque option. Nous avons également défini une méthode de vote dans l'application Vue qui incrémente le nombre de votes de l'option de 1 lorsque l'utilisateur clique sur l'option. Enfin, nous utilisons les propriétés calculées de Vue.js pour calculer la proportion de votes exprimés pour chaque option. Au fur et à mesure que les utilisateurs votent, la page sera mise à jour pour refléter les résultats de tous les votes exprimés.

Conclusion

Dans cet article, nous avons expliqué comment rédiger une application de vote dans Vue.js. Nous recommandons toujours de lire davantage dans la documentation de Vue.js pour en savoir plus sur Vue.js et son utilisation. Avec Vue.js, vous pouvez facilement développer diverses applications Web et y implémenter diverses fonctions.

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!