list-item 根据boolean属性 动态设置class

list-item  根据boolean属性  动态设置class

鸿蒙
HarmonyOS
OpenHarmony
2021-11-01 08:14:39
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Noedd

通过三目运算符就可以了。

附上代码供参考:

<!-- index.hml -->

<div class="container">

    <list class="todo-wrapper">

        <list-item for="{{ todolist }}" class="{{ booleanValue ? 'redClass' : 'blueClass' }}">

            <text class="todo-title">{{ $item.title }}</text>

            <text class="todo-title">{{ $item.date }}</text>

        </list-item>

    </list>

</div>

// index.js

export default {

    data: {

        todolist: [{

                       title: '刷题',

                       date: '2021-12-31 10:00:00',

                   }, {

                       title: '看电影',

                       date: '2021-12-31 20:00:00',

                   }],

        booleanValue: false

    },

}

/* index.css */

.container {

    display: flex;

    justify-content: center;

    align-items: center;

    left: 0px;

    top: 0px;

    width: 454px;

    height: 454px;

}

.todo-wrapper {

    width: 454px;

    height: 300px;

}

.todo-item {

    width: 454px;

    height: 80px;

    flex-direction: column;

}

.todo-title {

    width: 454px;

    height: 40px;

    text-align: center;

}

.redClass {

    background-color: red;

}

.blueClass {

    background-color: blue;

}

分享
微博
QQ
微信
回复
2021-11-01 14:55:06
相关问题
JS swiper 怎么像list一样动态添加item
935浏览 • 1回复 待解决
如何动态根据资源名获取资源id
1658浏览 • 1回复 已解决
动态设置文本导致致命错误
2338浏览 • 1回复 待解决
求js 中 class类名动态绑定的问题?
134浏览 • 1回复 待解决
组件如何动态设置全局唯一ID?
996浏览 • 1回复 待解决
关于属性动画的问题?
3348浏览 • 1回复 待解决
鸿蒙如何根据Component 得到bitmap呢
688浏览 • 1回复 待解决
如何自定义Component 属性
7963浏览 • 3回复 待解决
鸿蒙js 如何使用动态style
2033浏览 • 1回复 待解决
ListContainer中的Item能取消拖拽吗
1078浏览 • 1回复 待解决
鸿蒙有没有clipToPadding所对应的属性
923浏览 • 1回复 待解决
SDK:API Version 3有没有visibility属性
1266浏览 • 1回复 待解决
JS UI框架中canvas如何动态指定宽高
628浏览 • 1回复 待解决