-1
  {
    "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的上面

12月3日提问

查看全部 5 个回答

0
<li v-for='item in list' :key='item.id' :style="{ color:item.status==0?'red':''}">{{item.id}}</li>

图片描述

推荐答案

1

已采纳

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>

推广链接