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>

    效果图:

  • 相关阅读:
    A1066 Root of AVL Tree (25 分)
    A1099 Build A Binary Search Tree (30 分)
    A1043 Is It a Binary Search Tree (25 分) ——PA, 24/25, 先记录思路
    A1079; A1090; A1004:一般树遍历
    A1053 Path of Equal Weight (30 分)
    A1086 Tree Traversals Again (25 分)
    A1020 Tree Traversals (25 分)
    A1091 Acute Stroke (30 分)
    A1103 Integer Factorization (30 分)
    A1032 Sharing (25 分)
  • 原文地址:https://www.cnblogs.com/lovebear123/p/12717927.html
Copyright © 2011-2022 走看看