uniapp的radio怎麼賦值

UniApp 的 Radio 怎麼賦值

UniApp 是一個跨平台開發框架，開發者可以使用 UniApp 來開發多端應用程序，包括 H5、小程式、APP 等。在 UniApp 中，Radio 是常用的表單控制項，用於多項選擇，但在使用 Radio 時，可能需要對 Radio 進行賦值。

Radio 的基本用法

在 UniApp 中使用 Radio 控制項非常簡單。首先，在頁面中引入Radio 並定義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>

以上程式碼中，透過<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 的值時，請確保新值在選項清單中存在，否則 Radio 不會有任何選項被選取。

總結

透過以上的簡單範例，我們可以看到，使用 UniApp 中的 Radio 控制項是非常容易的，而且我們也可以透過簡單的程式碼修改來實現 Radio 的賦值。希望以上內容能幫助大家更能使用 UniApp 中的 Radio 控制項。

以上是uniapp的radio怎麼賦值的詳細內容。更多資訊請關注PHP中文網其他相關文章！