How to assign value to uniapp's radio

How to assign a value to Radio in UniApp

UniApp is a cross-platform development framework. Developers can use UniApp to develop multi-terminal applications, including H5, applets, APPs, etc. In UniApp, Radio is a commonly used form control for multiple selections, but when using Radio, you may need to assign a value to Radio.

Basic usage of Radio

Using the Radio control in UniApp is very simple. First, introduce Radio into the page and define Radio options:

<template>
  <view>
    <radio-group v-model="selected">
      <radio v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</radio>
    </radio-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ]
    }
  }
}
</script>

In the above code, define the Radio group through the <radio-group></radio-group> tag, and pass v- model Binds the value of the selected item. Then, use the <radio></radio> tag to define Radio's options, and v-for to loop through the option list, using the :value attribute to assign values ​​to the options.

In this way, when the user selects one of the items, the value of the option will be stored in selected.

Assignment of Radio

When we need to assign a value to Radio, we can dynamically modify the value of selected through code when the component is loaded, thereby modifying the default Radio option selected. Suppose we need to set the default selected option to "Option 2". Then you need to assign the value of selected to "2" when the component is loaded:

<template>
  <view>
    <radio-group v-model="selected">
      <radio v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</radio>
    </radio-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ]
    }
  },
  created() {
    this.selected = '2';
  }
}
</script>

In the above code, by setting ## in the created life cycle function Assigning the value of #selected to "2" will set the default selected item to "Option 2".

It should be noted that when the value bound to

v-model changes, Radio will also update the options accordingly. Therefore, when modifying the value of selected, make sure that the new value exists in the option list, otherwise Radio will not have any options selected.

Summary

Through the above simple example, we can see that it is very easy to use the Radio control in UniApp, and we can also implement the assignment of Radio through simple code modifications. I hope the above content can help you better use the Radio control in UniApp.

The above is the detailed content of How to assign value to uniapp's radio. For more information, please follow other related articles on the PHP Chinese website!