How to implement multi-selection and radio buttons in Vue

Vue is a very popular JavaScript framework that helps developers quickly create interactive web applications. This article will introduce how Vue implements multi-select and radio buttons.

Multi-select button

Multi-select button is usually used to allow the user to select multiple options. In Vue, we can implement multi-select buttons through the v-model directive and checkbox elements.

First, we need to define an array in the Vue instance. This array will store all selected options. We can represent each option as an object and render them onto the page using the v-for directive:

<template>
  <div>
    <label v-for="option in options" :key="option.id">
      <input type="checkbox" :value="option" v-model="selectedOptions">
      {{ option.label }}
    </label>
    <p>Selected options: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, label: 'Option 1' },
        { id: 2, label: 'Option 2' },
        { id: 3, label: 'Option 3' }
      ],
      selectedOptions: []
    };
  }
};
</script>

In the above code, we use the v-for directive to render the list of options onto the page , and bind the value of each option to the value attribute of the input element. We also use the v-model directive to bind the selected options into the selectedOptions array.

When the user selects one or more options, the selectedOptions array will be updated and displayed on the page. We can access these options in other parts of the code and use them to perform other operations.

Radio Buttons

Radio buttons are typically used to allow the user to select an option from a set of options. In Vue, we can implement radio buttons through the v-model directive and the radio element.

Unlike multi-select buttons, radio buttons can only select one option. We can represent each option as an object and render them onto the page using the v-for directive:

<template>
  <div>
    <label v-for="option in options" :key="option.id">
      <input type="radio" :value="option" v-model="selectedOption">
      {{ option.label }}
    </label>
    <p>Selected option: {{ selectedOption.label }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, label: 'Option 1' },
        { id: 2, label: 'Option 2' },
        { id: 3, label: 'Option 3' }
      ],
      selectedOption: null
    };
  }
};
</script>

In the above code, we use the v-for directive to render the list of options onto the page , and bind the value of each option to the value attribute of the input element. We also use the v-model directive to bind the selected option to the selectedOption variable.

When the user selects an option, the selectedOption variable will be updated and displayed on the page. We can access this option in other parts of the code and use it to perform other operations.

Overall, Vue makes it very easy to implement multi-select and radio buttons. By simply using the v-model directive and related HTML elements, we can create interactive web applications and enable users to select the options they need.

The above is the detailed content of How to implement multi-selection and radio buttons in Vue. For more information, please follow other related articles on the PHP Chinese website!