list-item 根据boolean属性 动态设置class
list-item 根据boolean属性 动态设置class
鸿蒙
HarmonyOS
OpenHarmony
赞
收藏 0
回答 1
待解决
相关问题
HarmonyOS 点击list的item,修改当前item的属性状态值List根据属性值变化刷新UI
556浏览 • 1回复 待解决
如何让list-item组件里的image图片懒加载?
2675浏览 • 1回复 待解决
点击一个list的item,怎么给这个item添加class
6105浏览 • 1回复 待解决
JS swiper 怎么像list一样动态添加item?
6632浏览 • 1回复 待解决
ForEach下item是父类.如何动态获取不同子类的数据, 根据子类来区分item某些值
1878浏览 • 1回复 待解决
HarmonyOS List内容不足的时候设置什么属性可以让其item内容填充满屏幕高度
205浏览 • 1回复 待解决
如何动态设置组件属性的值
1066浏览 • 1回复 待解决
HarmonyOS 如何根据条件设置UI组件的属性
264浏览 • 1回复 待解决
List组件的initialIndex属性设置不生效
2549浏览 • 1回复 待解决
HarmonyOS list的divider在item设置stateStyles时系统显示问题
228浏览 • 1回复 待解决
HarmonyOS 关于List组件是否可以动态设置高度
828浏览 • 1回复 待解决
List设置了lanes(2)怎么让最后一个item能占据整个List宽度
2224浏览 • 1回复 待解决
HarmonyOS List item 刷新问题
1128浏览 • 1回复 待解决
HarmonyOS使用属性动画改变List组件内item的高度,其内容高度会突变
679浏览 • 1回复 待解决
list添加或删除item需要设置入场出场动画典型案例
1302浏览 • 1回复 待解决
HarmonyOS list的item如何保存状态
510浏览 • 2回复 待解决
HarmonyOS Boolean和boolean在使用上的区别
230浏览 • 1回复 待解决
#鸿蒙通关秘籍#List组件的基本用法和属性设置
435浏览 • 1回复 待解决
HarmonyOS Image为什么draggable(value: boolean)这个属性默认是true?
552浏览 • 1回复 待解决
HarmonyOS 如何设置List的Item的高度自适应为内容本身的高度?
230浏览 • 1回复 待解决
HarmonyOS list中item的交互效果处理
636浏览 • 1回复 待解决
HarmonyOS List组件指定item刷新实现方案
387浏览 • 1回复 待解决
List没有Reverse属性。在聊天界面的时候,数据无法动态往上添加
859浏览 • 1回复 待解决
怎么获取List里面每个item的position?
415浏览 • 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;
}