vue中v-for遍历一组数据,给status=0并且是第一个status=0添加样式

  {
    "id": 0,
    "status": "1", // 状态 默认0 表示为使用 ,1表示已使用
  },
  {
    "id": 1,
    "status": "0",
  },
  {
    "id": 2,
    "status": "1",
  },{
    "id": 3,
    "status": "0", 
  },
  这组数据有一个status属性,0代表未使用,1代表使用
  需要给status=0并且是第一个status=0的状态添加样式,也就是只有id=1的添加样式,
  当id=1的status状态变成1时,样式自动添加到id=3的上面

阅读 426
评论
    5 个回答

    CSS能搞的 我们通常就不用JS了..

    <div class="container">
      <div class="child" status="1"></div>
      <div class="child" status="0"></div>
      <div class="child" status="1"></div>
      <div class="child" status="0"></div>
      <div class="child" status="0"></div>
    </div>
    .child {
      height: 20px;
      width: 200px;
      background: green;
      margin: 20px 0;
    }
    
    [status="0"] {
      background: red;
    }
    
    [status="0"] ~ [status="0"] {
      background: green; // 这里麻烦了点,要覆盖掉前面的样式
    }
        

    clipboard.png

    原理大概是这么个,就是利用兄弟选择器把第一个满足条件的元素排查出来。
    这里用的是属性选择器,你也可以用其它的。

    就上面这个例子而言,CSS可以优化为:

    .child, [status="0"] ~ [status="0"] {
      height: 20px;
      width: 200px;
      background: green;
      margin: 20px 0;
    }
    
    [status="0"] {
      background: red;
    }

    这样就不必重复写覆盖样式。

    对于v-for:
    <div v-for="item of list" :status="item.status"></div>

      既然要做样式转移的话,就需要在额外添加一个属性来表示是否应用改样式

      {id: 0, status: 1, flag: false}
      添加一个flag来控制样式转移

        • 334

        可以试试 find 方法

        var it = arr.find(function(item){
            return item.status == 0
        })
        
        console.log(it)
        返回了该item
          array.find()这个函数似乎可以满足要求
          
          var array = [{id: 1, status: 0},{id: 2, status: 1}, {id:3, status: 1}]
          const isStatusFirstTrue = (id) => {
            const item = array.find(item => item.status )
            if(item) {
              return id === item.id
            }
          }
          
          console.log(isStatusFirstTrue(3)) //false
          console.log(isStatusFirstTrue(2)) //true
            <li v-for='item in list' :key='item.id' :style="{ color:item.status==0?'red':''}">{{item.id}}</li>

            图片描述

              撰写回答

              登录后参与交流、获取后续更新提醒