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
4558浏览 • 1回复 待解决
List组件的initialIndex属性设置不生效
180浏览 • 1回复 待解决
求js 中 class类名动态绑定的问题?
4666浏览 • 1回复 待解决
如何动态根据资源名获取资源id
6614浏览 • 1回复 已解决
Web组件domStorageAccess属性设置
315浏览 • 1回复 待解决
动态设置文本导致致命错误
5360浏览 • 1回复 待解决
通过WindowProperties设置属性不生效
190浏览 • 1回复 待解决
List组件如何设置多列
215浏览 • 1回复 待解决
通用属性width是否支持设置变量
170浏览 • 1回复 待解决
组件如何动态设置全局唯一ID?
5094浏览 • 1回复 待解决
js如何把list组件设置为横向的?
1937浏览 • 1回复 待解决
List组件如何设置两端的渐变效果
168浏览 • 1回复 待解决