How to set up a drop-down selection box in Vue.js

Vue.js is a lightweight JavaScript framework that is widely used in web development. This article mainly introduces how to set up a drop-down selection box in Vue.js.

1. Defining data in the Vue instance

In the Vue instance, you can use the data option to define data, for example:

data() {
  return {
    selectedValue: ''
  }
}

Here, we define A data property named selectedValue and initialized to the empty string.

2. Bind the value of the drop-down selection box to the attributes in the Vue instance

In the drop-down selection box, we need to use the v-model directive to bind the selected value with Properties in Vue instances. For example:

<select v-model="selectedValue">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Here, we bind the selected value of the drop-down selection box to the selectedValue property in the Vue instance.

3. Get the value selected in the drop-down selection box

We can use the methods option to define a method named getSelectedValue to get the value selected in the drop-down selection box.

methods: {
  getSelectedValue() {
    console.log(this.selectedValue);
  }
}

Here, we define a method to print the value of the selectedValue attribute in the Vue instance through console.log.

4. Complete sample code

The following is a complete example of a drop-down selection box, including defining data, binding the value of the drop-down selection box to the properties in the Vue instance, and obtaining Selected value:

<div id="app">
  <select v-model="selectedValue" @change="getSelectedValue">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

<script>
new Vue({
  el: '#app',
  data() {
    return {
      selectedValue: ''
    }
  },
  methods: {
    getSelectedValue() {
      console.log(this.selectedValue);
    }
  }
})
</script>

5. Summary

Through the above example, we can find that setting a drop-down selection box in Vue is very simple. You only need to define data and bind the drop-down box. Select the value of the selection box and the attribute in the Vue instance, and then obtain the selected value of the drop-down selection box as required.

The above is the detailed content of How to set up a drop-down selection box in Vue.js. For more information, please follow other related articles on the PHP Chinese website!