uni-app 單選復選

效果圖：

單選：

<view class="share_choice" v-for="(item,index) in sharelist" :key="index" :item="item" >
<view class="shar-item-ckb">
<uni-icons v-if="item.selected" type="checkmarkempty" :size="20" color="#fff"></uni-icons>
</view>
<text  class="shar_time">{{item.name}}</text>
</view>

這里使用v-for將數據循環出來

    data() {
            return {
                sharelist: [{
                        id: 12,
                        name: "三天有效",
                        selected: true,
                        
                    },
                    {
                        id: 13,
                        name: "七天有效",
                        selected: false,
                    },
                    {
                        id: 14,
                        name: "永久有效",
                        selected: false,
                    },
                ],
            }
        },

然后給選擇一個屬性：

props: {
            item: {
                type: Object,
                default: function() {
                    return {};
                }
            },
            selected: {
                type: Boolean,
                default: false
            }
        },

最后在給單選框一個點擊事件

<view class="shar-item-ckb"   @click="timedata(item.id)">
<uni-icons v-if="item.selected" type="checkmarkempty" :size="20" color="#fff"></uni-icons>
</view>

在寫上點擊事件的方法：

         methods:{

                         timedata(id)
                         {
                             for(let i=0;i<this.sharelist.length;i++)
                             {
                                 if(this.sharelist[i].id==id)
                                 {
                                     this.sharelist[i].selected=true
                                 }
                                 else
                                 {
                                     this.sharelist[i].selected=false
                                 }
                             }
                         },
         }

這里的思路是：先找到點擊單選框的那個id，然后在對點擊的單選框進行判斷，我這個方法里面是必須得選擇一個單選框，如果對於單選框可以選擇不選和選擇的話，只需要在對id進行判斷，加一個判斷語句就行

效果圖：

 

 

timedata(id)
                         {
                             for(let i=0;i<this.sharelist.length;i++)
                             {
                                 if(this.sharelist[i].id==id)
                                 {
                                     if(this.sharelist[i].selected==true)
                                     {
                                         this.sharelist[i].selected=false
                                     }
                                     else
                                     {
                                         this.sharelist[i].selected=true
                                     }
                                 }
                                 else
                                 {
                                     this.sharelist[i].selected=false;
                                 }
                             }
                         },

這樣子就實現了可以單選或者不選

如果可以復選，就不用這么復雜了，一系列的邏輯就很簡單了，直接在點擊事件上面判斷就可以了

<view class="share_choice" v-for="(item,index) in sharelist" :key="index" :item="item" >
<view class="shar-item-ckb"   @click="item.selected=!item.selected">
<uni-icons v-if="item.selected" type="checkmarkempty" :size="20" color="#fff"></uni-icons>
</view>
<text  class="shar_time">{{item.name}}</text></view>

效果圖：