14. Select to create a list of drop down values

Here the v-model directive is in the select tag and not with the individual options.

Here we used different options with value indicated.

This is the App.vue file:

<template>
  <div>
    <fieldset>
      <legend>Color used:</legend>
      <select v-model="col">
        <option value="Red">Red</option>
        <option value="Green">Green</option>
        <option value="Blue">Blue</option>
      </select>
    </fieldset>
    <h2>Color:</h2>
    <h2>{{col}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      col: "Red"
    }
  }
}
</script>

<style>
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
  margin: 20px auto;
  text-align: center;
}
</style>

This is the output: