zoukankan      html  css  js  c++  java
  • 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>

    效果图:

  • 相关阅读:
    poj2328简单模拟
    一个简单的Silverlight的DataBinding和DateTemplate的Demo
    poj3468线段树_区间数字统计
    一个Silverlight的可视化图的DataBinding的Demo
    poj3321 dfs+树状数组
    C#拖拽控件
    【存档归纳】Sqlserver数据库详解 深度挖掘sqlserver帮助所得 一
    电脑蓝屏原因分析利器
    C# B/S程序如何获取客户端的MAC地址
    尚需研究之QQ音乐首页的图片轮换
  • 原文地址:https://www.cnblogs.com/lovebear123/p/12717927.html
Copyright © 2011-2022 走看看