[Vue.js] HTML Select Element Example

April 27, 2017

Use Vue.js to manipulate HTML select element. First show how to use v-model directive to create data bindings for select element. Then use the selected option to make some animation via animate.css.

The following demo shows how to use v-model to get selected option.

selected option: bounce

The following is the source code for above demo.

HTML:

<div id="vueapp">
  <select v-model="action">
    <option value="bounce">bounce</option>
    <option value="flash">flash</option>
    <option value="pulse">pulse</option>
  </select>

  <pre>selected option: {{ action }}</pre>
</div>

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

The user selection is saved in action variable.

JavaScript:

'use strict';

var app = new Vue({
  el: '#vueapp',
  data: {
    action: 'bounce'
  }
});

Now we give a more realistic example. Show you how to make animations based on the selected options.

To use animate.css, first insert the following line in the head section of your HTML.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />

Replace the HTML code in the first demo as follows (JavaScript code unchanged):

HTML:

<div id="vueapp">
  <select v-model="action">
    <option value="bounce">bounce</option>
    <option value="flash">flash</option>
    <option value="pulse">pulse</option>
  </select>

  <div :class="'animated ' + action">Animate.css</div>
</div>

To make animation via animate.css, we need to add two classes to the animated element. One is animated, and the other is the name of the animation. You can get all the animation names in animate.css website. Here only three animation names are used for demo purpose.

We use the class and style bindings provided by Vue.js to update the classes of animated element, and hence achieve the animations without writing any JavaScript code!

Tested on:

• Chromium Version 58.0.3029.81 Built on Ubuntu , running on Ubuntu 17.04 (64-bit)
• Vue.js 2.2.6

References:

[2][Vue.js] Animate.css Test Demo