zoukankan      html  css  js  c++  java
  • uniapp多选按钮

    闲言少叙,直接上效果图,看图才知道是不是自己想要的效果

     HTML代码

    <view class="page index">
            <!-- 多选,不改变选择中后的值 -->
            <view class="list-box">
                <view v-for="(item,index) in list" :key="index" @click="choice(index)" :class="[item.selected?'selde':'noselde']">
                    {{item.selected?item.title:item.title}}
                </view>
            </view>
    
            <!-- 多选,改变选择中后的值 -->
            <!-- <view class="list-box">
                <view v-for="(item,index) in list" :key="index" @click="choice(index)" :class="[item.selected?'selde':'noselde']">
                    {{item.selected?"已选择":"选择"}}
                </view>
            </view> -->
        </view>

    js代码

    <script>
        export default {
            data() {
                return {
                    list: [{
                            selected: false,
                            title: '张三'
                        },
                        {
                            selected: false,
                            title: '李四'
                        },
                        {
                            selected: false,
                            title: '张三'
                        },
                        {
                            selected: false,
                            title: '张三'
                        },
                        {
                            selected: false,
                            title: '张三'
                        },
                    ],
                    selectId: [],
                };
            },
            methods: {
                //选择按钮
                choice(index) {
                    if (this.list[index].selected == true) {
                        this.list[index].selected = false;
                        //取消选中时删除数组中的值
                        for (var i = 0; i < this.selectId.length; i++) {
                            if (this.selectId[i] === this.list[index].course_id) {
                                this.selectId.splice(i, 1);
                            }
                        }
                        console.log("选中的值", this.selectId)
                    } else {
                        this.list[index].selected = true;
                        this.selectId.push(this.list[index].course_id)
                        console.log("选中的值", this.selectId)
                    }
                }
            }
        };
    </script>

    scss代码

    <style lang="scss">
        .list-box {
            display: flex;
            flex-wrap: wrap;
            padding: 16upx;
            border-radius: 10upx;
    
            view {
                width: 30%;
                height: 60upx;
                line-height: 60upx;
                text-align: center;
                margin-top: 30upx;
    
                &:not(:nth-child(3n)) {
                    margin-right: calc(10% / 2);
                }
            }
        }
    
        /* 已选择 */
        .selde {
            border: 1px solid red;
            background: red;
            color: #FFFFFF;
            border-radius: 20upx;
            font-size: 20upx;
            padding: 0 10upx;
        }
    
        /* 未选择 */
        .noselde {
            border: 1px solid #959595;
            background: #FFFFFF;
            color: #959595;
            border-radius: 20upx;
            font-size: 20upx;
            padding: 0 10upx;
        }
    </style>
  • 相关阅读:
    如何在外部获取当前A标签的ID值
    获取<a>标签值</a>的标签值及更改
    Mysql : Maximum execution time of 30 seconds exceeded
    Ajax+PHP实现的进度条--实例
    HTML控件 隐藏
    Ajax学习--理解 Ajax 及其工作原理
    XMLHttpRequest 对象属性参数参考
    七、smarty--缓存的控制
    六、smarty-缓存控制前的页面静态化原理
    Java 的 List 与 Scala 的 Seq 相互转换
  • 原文地址:https://www.cnblogs.com/cqiong/p/14442508.html
Copyright © 2011-2022 走看看