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

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

附上代码供参考：

<!-- 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;

}