How to write voting in vue

Vue is a popular JavaScript framework that can be used to build web applications. In addition to its powerful features and easy-to-use API, Vue also provides a large number of extension functions and plug-ins that allow web developers to quickly develop various web applications. This article will show you how to build a simple voting application using Vue.js.

Step 1: Preparation

Before you start writing code, you first need to install Vue.js. You can use Vue's CDN or npm to download the installation package to install Vue.js. Additionally, you will need a text editor, such as Visual Studio Code, to edit Vue.js applications.

Step 2: Build the voting application

After the preparation work, next, we start the steps of building the voting application. We will use Vue.js to code HTML, CSS, and JavaScript.

First, we create an HTML file and add the following code:

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

In the above HTML code, we define a Vue application that contains a basic template with a header and a list of options. We use Vue.js’s v-for directive to iterate through the list of options and add them to the page. Additionally, we have defined two data properties for the Vue application: title and options. These properties store the data we display on the page.

Step 3: Add voting function

Now that we have a basic page, let’s add voting function. In our voting application, we use Vue.js’s v-on directive to implement the voting functionality.

In order to implement the voting functionality, we need to define an event handler that will be called when the user clicks on an option. To do this, we modify a property in the Vue application's data properties to identify which option has been selected. We also use Vue.js’s computed properties to calculate the vote proportion for each 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>

In the above code, we updated the Vue application The data attribute of the program to contain a votes array to store the number of votes for each option. We have also defined a vote method in the Vue application that increments the option's vote count by 1 when the user clicks on the option. Finally, we use Vue.js’s computed properties to calculate the vote share for each option. As users vote, the page will update to reflect the voting results for all votes cast.

Conclusion

In this article, we covered how to write a voting application in Vue.js. We always recommend reading more in the Vue.js documentation to learn more about and usage of Vue.js. With Vue.js, you can easily develop various web applications and implement various functions in them.

The above is the detailed content of How to write voting in vue. For more information, please follow other related articles on the PHP Chinese website!