Comment attribuer une valeur à la radio dans Uniapp

Comment attribuer de la valeur à Radio dans UniApp

UniApp est un cadre de développement multiplateforme. Les développeurs peuvent utiliser UniApp pour développer des applications multi-extrémités, notamment H5, des mini-programmes, des applications, etc. Dans UniApp, Radio est un contrôle de formulaire couramment utilisé pour les sélections multiples, mais lorsque vous utilisez Radio, vous devrez peut-être attribuer une valeur à Radio.

Utilisation de base de Radio

L'utilisation de la commande Radio dans UniApp est très simple. Tout d'abord, introduisez Radio dans la page et définissez les options Radio :

<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>

Dans le code ci-dessus, définissez le groupe Radio via la balise <radio-group>, et transmettez v-model< /code> lie la valeur de l'élément sélectionné. Ensuite, utilisez la balise <code><radio> pour définir les options Radio et parcourez la liste des options via v-for, en utilisant :value attribut à l’affectation d’option. <radio-group> 标签定义 Radio 的组，并通过 v-model 绑定选中项的值。然后，使用 <radio> 标签定义 Radio 的选项，并通过 v-for 循环遍历选项列表，使用 :value 属性来为选项赋值。

这样，当用户选择其中一项时，selected 中就会存储该选项的值。

Radio 的赋值

当需要对 Radio 进行赋值时，我们可以在组件加载时，通过代码动态地将 selected 的值进行修改，从而修改默认选中的 Radio 选项。假设我们需要将默认选中的选项设置为 “选项2”。则需要在组件加载时，将 selected 的值赋为 “2”：

<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>

以上代码中，通过在 created 生命周期函数中将 selected 的值赋为 “2”，就可以将默认选中项设置为 “选项2”。

需要注意的是，当 v-model 绑定的值发生变化时，Radio 也会相应地更新选项。因此，在修改 selected

De cette façon, lorsque l'utilisateur sélectionne l'un des éléments, la valeur de l'option sera stockée dans selected.

Affectation de Radio

Lorsque nous devons attribuer une valeur à Radio, nous pouvons modifier dynamiquement la valeur de selected via le code lorsque le composant est chargé, modifiant ainsi l'option Radio sélectionnée par défaut. Supposons que nous devions définir l'option sélectionnée par défaut sur "Option 2". Ensuite, vous devez attribuer la valeur de selected à "2" lorsque le composant est chargé : 🎜rrreee🎜Dans le code ci-dessus, en définissant selected dans le <code>created fonction de cycle de vie En attribuant la valeur de à "2", vous pouvez définir l'élément sélectionné par défaut sur "Option 2". 🎜🎜Il convient de noter que lorsque la valeur liée à v-model change, Radio mettra également à jour les options en conséquence. Par conséquent, lors de la modification de la valeur de selected, assurez-vous que la nouvelle valeur existe dans la liste des options, sinon Radio n'aura aucune option sélectionnée. 🎜🎜Résumé🎜🎜Grâce à l'exemple simple ci-dessus, nous pouvons voir qu'il est très facile d'utiliser le contrôle Radio dans UniApp, et nous pouvons également implémenter l'affectation de Radio grâce à de simples modifications de code. J'espère que le contenu ci-dessus pourra vous aider à mieux utiliser la commande radio dans UniApp. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!