uni-app项目数据列表根据不同条件，显示不同背景（含错误做法）

最新推荐文章于 2024-06-04 16:14:20 发布

原创最新推荐文章于 2024-06-04 16:14:20 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

本文介绍了在uni-app项目中如何根据不同的条件为数据列表的特定项添加背景颜色。通过JavaScript和Vue的结合使用，实现动态效果，避免了错误的实现方式，确保页面逻辑的正确性。

需求分析：
请求得到的数据列表，当列表中某个单项满足条件时添加背景颜色

效果
在这里插入图片描述
页面

<view 
 class="tr u-flex"  
 v-for="(item,index) in detailList" 
 :key="index" 
 :class="{active:item.isActive}">
	 <view 
	 class=" u-flex-1 name u-text-left"
	  @click="goMaterial(item,index)">
	  {{item.itemName}}
	  </view>
</view>

逻辑层

export default{
   data(){
      return{
      detailList:[],
      isActive:false
         }
    },
   methods:{
    getData(){
      ///...得到后台数据
      this.detailList=res.data.data
      if(this.detailList){
      this.detailList.forEach(item=>{
          if(item.price!=item.prePrice){
          //错误做法 页面： :class="{active:isActive}">
          // this.isActive=true  这样做循环之后，
          //如果最后一个满足条件，那么所有的列都加背景颜色  
          //因为遍历后，最后一个给isActive 赋值为true
          item.isActive=true 
          //给每个对象添加一个名值对
          //视图遍历时，item里面满足 item.isActive=true 才加背景色
             }
        })
      }
   }
 } 
}