zoukankan      html  css  js  c++  java
  • vue在v-for中根据index和其他数据同时决定item的css样式

    css对应多种状态

    无选中一种状态,无加粗,字体小

    打开筛选器一种状态,加粗,字体最大

    非打开筛选器一种状态,加粗,字体适中

    因为class不能对应method直接传值,只能通过表达式来实现css的选择,具体参考

    https://cn.vuejs.org/v2/guide/class-and-style.html 

    但是这里既要根据index的值,也要根据筛选器中选择的值来确定css的状态,所以我们必须要把index传到方法里去计算,常规的方法不可以,但是我们可以定义css数组

    然后再数组中定义method,传如index,然后再medthod返回对应的css名称即可

    如下所示:

    <view class="row h-bt v-ct navigat">
                    <view
                        v-for="(item, index) in typeList"
                        :key="index"
                        @tap="changeTypeHandler(index)"
                        :class="selectedIndex == index ? ['grow', 'align', 'selected', 'row', 'v-ct'] : ['grow', 'align', hasValueClass(index), 'row', 'v-ct']"
                    >
                        <view>{{ item }}</view>
                        <view class="triangle"></view>
                    </view>
                    <!-- <view class="search row h-end v-ct grow2"><icon type="search" color="#fff" @tap="searchHandler" /></view> -->
                </view>
    
    
    
    
    
    methods: {
            hasValueClass: function(index) {
                //检测index对应的数组是否有选中的值
                console.log('index=', index, 'indexMatchList=', this.isIndexMatchList(index));
                if(this.isIndexMatchList(index)){
                    return 'hasValue';
                }else{
                    return '';
                }
                // return{hasValue: this.isIndexMatchList(index)}
            },
            isIndexMatchList: function(index) {
                //index是否与选中的选项匹配
                switch (index) {
                    case 0:
                        return this.selectedOrderTypeList.length > 0;
                        break;
                    case 1:
                        return this.selectedOrderStatusList.length > 0;
                        break;
                    case 2:
                        return this.selectedWorkZone.length > 0;
                        break;
                    default:
                        return false;
                }
            }
    }
    
    
    
    .navigat {
            color: #ffffff;
            font-size: 30upx;
            font-weight: 300;
            margin-top: 30upx;
            .grow {
                flex-grow: 1;
            }
            .grow2 {
                flex-grow: 2;
            }
            .align {
                text-align: center;
            }
            .selected {
                font-size: 36upx;
                font-weight: bold;
            }
            .hasValue {
                font-size: 30upx;
                font-weight: bold;
            }
            .triangle {
                border: 12upx solid rgba($color: #000000, $alpha: 0);
                border-top: 12upx solid #ffffff;
                margin: 12upx 0 0 12upx;
            }
        }
  • 相关阅读:
    oracle 游标的使用
    mvc的表单发送ajax请求,太强大了!!!!
    报表页面的异步加载
    一道关于集合分组并进行笛卡尔积的题目思路
    EF常用操作截图
    大数乘法取模运算(二进制)
    求sqrt()底层效率问题(二分/牛顿迭代)
    CodeForces 282C(位运算)
    Codeforces Round #371 (Div. 2)(setunique)
    Codeforces Round #370 (Div. 2)(简单逻辑,比较水)
  • 原文地址:https://www.cnblogs.com/dongweiq/p/13345213.html
Copyright © 2011-2022 走看看