list-item 根据boolean属性 动态设置class
list-item 根据boolean属性 动态设置class
鸿蒙
HarmonyOS
OpenHarmony
赞
收藏 0
回答 1
待解决
相关问题
点击一个list的item,怎么给这个item添加class
4410浏览 • 1回复 待解决
如何让list-item组件里的image图片懒加载?
647浏览 • 1回复 待解决
JS swiper 怎么像list一样动态添加item?
4647浏览 • 1回复 待解决
List组件的initialIndex属性设置不生效
229浏览 • 1回复 待解决
List设置了lanes(2)怎么让最后一个item能占据整个List宽度
207浏览 • 1回复 待解决
求js 中 class类名动态绑定的问题?
4737浏览 • 1回复 待解决
如何动态根据资源名获取资源id
6691浏览 • 1回复 已解决
SideBarContainer如何设置controlButton属性
130浏览 • 1回复 待解决
轻量级js ui,如何获取到list滚动到的item的index?
2666浏览 • 1回复 待解决
弄List下拉刷新时发现List的属性动画是无效的。
528浏览 • 1回复 待解决
动态设置文本导致致命错误
5405浏览 • 1回复 待解决
JavaUI 中List组件怎么实现右键点击Item项关联弹出一个菜单?
1606浏览 • 1回复 待解决
Web组件domStorageAccess属性设置
373浏览 • 1回复 待解决
通用属性width是否支持设置变量
235浏览 • 1回复 待解决
List组件如何设置多列
302浏览 • 1回复 待解决
通过WindowProperties设置属性不生效
257浏览 • 1回复 待解决
组件如何动态设置全局唯一ID?
5167浏览 • 1回复 待解决
EventRunner 创建新线程的时候 create(boolean isDeposited)...?
5351浏览 • 1回复 待解决
请教一下listcontainer怎么设置item的左右滑动事件?
4322浏览 • 1回复 待解决
list组件,当设置点击事件时,如何知道当前点击的list索引号
5644浏览 • 1回复 待解决
SystemPluginLoader: find plugin class exception, Class:ohos.event.notification.plugin.NotificationPl
3918浏览 • 1回复 待解决
js如何把list组件设置为横向的?
2030浏览 • 1回复 待解决
List组件如何设置两端的渐变效果
204浏览 • 1回复 待解决
请教一下,listcontainer怎么设置item的滑动事件?是哪个方法?
3814浏览 • 1回复 待解决
是否支持使用fontFamily属性设置不同的字体
254浏览 • 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;
}