Heim > Artikel > Web-Frontend > So schreiben Sie Abstimmungen in Vue

So schreiben Sie Abstimmungen in Vue

PHPzOriginal: 2023-04-13 09:11:14970Durchsuche

Vue ist ein beliebtes JavaScript-Framework, das zum Erstellen von Webanwendungen verwendet werden kann. Zusätzlich zu seinen leistungsstarken Funktionen und der benutzerfreundlichen API bietet Vue auch eine große Anzahl an Erweiterungsfunktionen und Plug-Ins, die es Webentwicklern ermöglichen, schnell verschiedene Webanwendungen zu entwickeln. In diesem Artikel erfahren Sie, wie Sie mit Vue.js eine einfache Abstimmungsanwendung erstellen.

Schritt 1: Vorbereitung

Bevor Sie mit dem Schreiben von Code beginnen, müssen Sie zunächst Vue.js installieren. Sie können das CDN oder npm von Vue verwenden, um das Installationspaket zur Installation von Vue.js herunterzuladen. Darüber hinaus benötigen Sie einen Texteditor, z. B. Visual Studio Code, um Vue.js-Anwendungen zu bearbeiten.

Schritt 2: Erstellen Sie die Abstimmungsanwendung.

Nach der Vorbereitungsarbeit beginnen wir als nächstes mit den Schritten zur Erstellung der Abstimmungsanwendung. Wir werden Vue.js zum Codieren von HTML, CSS und JavaScript verwenden.

Zuerst erstellen wir eine HTML-Datei und fügen den folgenden Code hinzu:

<meta charset="utf-8">
<title>投票应用程序</title>
<script src="https://unpkg.com/vue"></script></p>
<p></head><br> <body></p>
<pre class="brush:php;toolbar:false"><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>

# 🎜🎜#Im obigen HTML-Code definieren wir eine Vue-Anwendung, die eine Basisvorlage mit einem Titel und einer Liste von Optionen enthält. Wir verwenden die v-for-Direktive von Vue.js, um die Liste der Optionen zu durchlaufen und sie der Seite hinzuzufügen. Darüber hinaus haben wir zwei Dateneigenschaften für die Vue-Anwendung definiert: Titel und Optionen. Diese Eigenschaften speichern die Daten, die wir auf der Seite anzeigen.

Schritt 3: Abstimmungsfunktion hinzufügen

Da wir nun eine Basisseite haben, fügen wir eine Abstimmungsfunktion hinzu. In unserer Abstimmungsanwendung verwenden wir die v-on-Direktive von Vue.js, um die Abstimmungsfunktionalität zu implementieren.

Um die Abstimmungsfunktion zu implementieren, müssen wir einen Event-Handler definieren, der aufgerufen wird, wenn der Benutzer auf eine Option klickt. Dazu ändern wir eine Eigenschaft in den Dateneigenschaften der Vue-Anwendung, um zu identifizieren, welche Option ausgewählt wurde. Wir verwenden auch die berechneten Eigenschaften von Vue.js, um den Anteil der abgegebenen Stimmen für jede Option zu berechnen: 🎜#

<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>

< /body>
#🎜🎜 #Im obigen Code haben wir die Dateneigenschaften der Vue-Anwendung aktualisiert, um ein Vote-Array aufzunehmen, das die Anzahl der Stimmen für jede Option speichert. Wir haben in der Vue-Anwendung außerdem eine Abstimmungsmethode definiert, die die Stimmenzahl der Option um 1 erhöht, wenn der Benutzer auf die Option klickt. Schließlich verwenden wir die berechneten Eigenschaften von Vue.js, um den Anteil der abgegebenen Stimmen für jede Option zu berechnen. Wenn Benutzer abstimmen, wird die Seite aktualisiert, um die Abstimmungsergebnisse für alle abgegebenen Stimmen anzuzeigen.

Fazit

In diesem Artikel haben wir behandelt, wie man eine Abstimmungsanwendung in Vue.js schreibt. Wir empfehlen immer, mehr in der Vue.js-Dokumentation zu lesen, um mehr über und die Verwendung von Vue.js zu erfahren. Mit Vue.js können Sie ganz einfach verschiedene Webanwendungen entwickeln und darin verschiedene Funktionen implementieren.

Das obige ist der detaillierte Inhalt vonSo schreiben Sie Abstimmungen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erstellen Sie ein Front-End-Projekt vueNächster Artikel：So erstellen Sie ein Front-End-Projekt vue

In Verbindung stehende Artikel

Mehr sehen