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>

效果图：