How to implement radio button in uniapp

In uniapp, the radio button is a common interactive control, used in scenarios where the user selects one or more options, such as selecting gender on the registration page, selecting language on the settings page, etc. This article will introduce in detail how to implement radio buttons in uniapp, including basic HTML syntax and Vue.js syntax.

1. Basic HTML syntax

In native HTML, the radio button is implemented through the <input> tag, and its typeThe attribute is set to radio to implement the radio button. At the same time, you need to set the value attribute for each radio button box to determine the option represented by the radio button box, for example:

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

, where the name attribute is set to the same value, indicating that the two radio button boxes are in the same group, and only one of them can be selected; the value attributes are set to male and female respectively, indicating that each options represented by radio button boxes.

2. Vue.js syntax

In uniapp, we can use Vue.js syntax to easily implement radio buttons. Bind the value of the option to the data model through the v-model directive. When the user selects a radio button, the value of the model will change accordingly. For example:

<template>
  <div>
    <input type="radio" id="male" value="male" v-model="gender">
    <label for="male">男</label>
    <input type="radio" id="female" value="female" v-model="gender">
    <label for="female">女</label>
    <p>您的选择是：{{gender}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gender: '',
    };
  },
};
</script>

Among them, the v-model directive associates the gender attribute with the radio button box. When the user selects a radio button box, The value of the gender attribute will be updated automatically. Finally, the user-selected values ​​are displayed in the template.

It should be noted that the v-model directive can only be used on form elements, such as <input>, <select> and <textarea> etc.

3. Encapsulating the radio button component

In order to facilitate reuse and maintenance, we can encapsulate the radio button into a component. In the components directory, create a new Radio.vue component:

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

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true,
    },
    value: {
      type: String,
      required: true,
    },
  },
  computed: {
    selected: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
};
</script>

This component receives two properties:

• options : Represents the option array, including the value and label of each option;
• value: Represents the currently selected value, that is Corresponds to the attribute value of the data model.

Use the v-for instruction to traverse the option array and generate multiple radio button boxes. Through the v-model instruction and the get and set methods, the selected value is bound to the data model and input# is triggered when selected. ##Event, update the value attribute of the parent component.

<template>
  <div>
    <Radio :options="options" v-model="selected"></Radio>
  </div>
</template>

<script>
import Radio from '@/components/Radio.vue';

export default {
  components: {
    Radio,
  },
  data() {
    return {
      options: [
        {
          value: 'male',
          label: '男',
        },
        {
          value: 'female',
          label: '女',
        },
      ],
      selected: '',
    };
  },
};
</script>

v-model directive, you can use the encapsulated radio button component.

The above is the detailed content of How to implement radio button in uniapp. For more information, please follow other related articles on the PHP Chinese website!