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:

 Option 1 Option 2 Option 3 

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:

  Option 1 Option 2 Option 3  
 

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!