要在 Vue.js 的 v-for 循环中根据条件改变样式，可以使用绑定类或内联样式来实现。以下是一个示例，其中我们将比较 one.date 与今天的日期，如果相等，则为该行添加一个额外的类，以加深颜色。
更新后的代码
<view v-for="(one, index) in dutyList" :key="index" class="page">
<view
class="list-line background"
:class="{ 'highlight': isToday(one.date) }" <!-- 根据日期判断是否高亮 -->
>
<text class="list-left">日期:</text>
<text class="list-right" style="margin-left: 75rpx;">{{ one.date }}</text>
</view>
<view
class="list-line"
:class="{ 'highlight': isToday(one.date) }"
>
<text class="list-left">白班人员:</text>
<text class="list-right">{{ one.name_white }}</text>
</view>
<view
class="list-line"
@tap="telPhoneWhite(one.tel_white)"
:class="{ 'highlight': isToday(one.date) }"
>
<text class="list-left">电话:</text>
<text class="list-right" style="margin-left: 75rpx;">{{ one.tel_white }}</text>
</view>
<view
class="list-line"
:class="{ 'highlight': isToday(one.date) }"
>
<text class="list-left">夜班人员:</text>
<text class="list-right">{{ one.name_black }}</text>
</view>
<view
class="list-line"
@tap="telPhoneBlack(one.tel_black)"
:class="{ 'highlight': isToday(one.date) }"
>
<text class="list-left">电话:</text>
<text class="list-right" style="margin-left: 75rpx;">{{ one.tel_black }}</text>
</view>
</view>
JavaScript 部分
在组件的 methods 中，添加一个 isToday 方法来比较日期：
methods: {
telPhoneWhite(phoneNumber) {
// 拨打白班人员的电话
if (phoneNumber) {
uni.makePhoneCall({
phoneNumber: phoneNumber,
success() {
console.log('拨打成功');
},
fail() {
console.error('拨打失败');
}
});
}
},
telPhoneBlack(phoneNumber) {
// 拨打夜班人员的电话
if (phoneNumber) {
uni.makePhoneCall({
phoneNumber: phoneNumber,
success() {
console.log('拨打成功');
},
fail() {
console.error('拨打失败');
}
});
}
},
isToday(dateString) {
const today = new Date();
const date = new Date(dateString);
return today.getFullYear() === date.getFullYear() &&
today.getMonth() === date.getMonth() &&
today.getDate() === date.getDate();
}
}
CSS 部分
添加一个样式以便于高亮显示：
<style scoped>
.highlight {
background-color: #ffeb3b; /* 使用你想要的背景颜色 */
}
</style>
总结
- 在
<view>标签中使用了动态类绑定，根据条件决定是否应用.highlight类。 - 添加了
isToday方法来比较当前日期和数据中的日期。 - 最后，通过 CSS 设置高亮效果。这样，当日期等于今天时，相应行会有不同的背景颜色，从而突出显示。
内容由零声教学AI助手提供，问题来源于学员提问
&1 请帮我分析有什么问题，这是在操作shar..." />
