list-item 根据boolean属性 动态设置class
list-item 根据boolean属性 动态设置class
鸿蒙
HarmonyOS
OpenHarmony
赞
收藏 0
回答 1
待解决
相关问题
点击一个list的item,怎么给这个item添加class
3609浏览 • 1回复 待解决
JS swiper 怎么像list一样动态添加item?
3665浏览 • 1回复 待解决
如何动态根据资源名获取资源id
5314浏览 • 1回复 已解决
求js 中 class类名动态绑定的问题?
3758浏览 • 1回复 待解决
动态设置文本导致致命错误
4603浏览 • 1回复 待解决
轻量级js ui,如何获取到list滚动到的item的index?
1701浏览 • 1回复 待解决
list组件,当设置点击事件时,如何知道当前点击的list索引号
4421浏览 • 1回复 待解决
js如何把list组件设置为横向的?
1319浏览 • 1回复 待解决
JavaUI 中List组件怎么实现右键点击Item项关联弹出一个菜单?
829浏览 • 1回复 待解决
组件如何动态设置全局唯一ID?
4044浏览 • 1回复 待解决
请教一下listcontainer怎么设置item的左右滑动事件?
3735浏览 • 1回复 待解决
请教一下,listcontainer怎么设置item的滑动事件?是哪个方法?
2983浏览 • 1回复 待解决
鸿蒙的服务卡片点击事件传参,可以动态设置吗?
3637浏览 • 1回复 待解决
SystemPluginLoader: find plugin class exception, Class:ohos.event.notification.plugin.NotificationPl
3386浏览 • 1回复 待解决
EventRunner 创建新线程的时候 create(boolean isDeposited)...?
4416浏览 • 1回复 待解决
Button如何设置state-container背景,目前button只能设置默认背景,无法显示点击动态效果?
3883浏览 • 1回复 待解决
关于属性动画的问题?
7598浏览 • 3回复 待解决
Redis数据类型列表list是什么?
571浏览 • 1回复 待解决
ListContainer中的Item能取消拖拽吗
2795浏览 • 1回复 待解决
redis 中的 List 操作的是什么?
470浏览 • 1回复 待解决
鸿蒙如何根据Component 得到bitmap呢
2565浏览 • 1回复 待解决
鸿蒙js 如何使用动态style
4341浏览 • 1回复 待解决
DirectionalLayout 动态添加组件问题
1862浏览 • 1回复 待解决
请问如何禁用ListContainer中item的拖动功能
5278浏览 • 1回复 待解决
ets怎么实现动态添加组件?
262浏览 • 1回复 待解决
通过三目运算符就可以了。
附上代码供参考:
<!-- 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;
}