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

Question

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

Answer 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; // 这里麻烦了点，要覆盖掉前面的样式
}
    

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

就上面这个例子而言，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>

Answer 2

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

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

Answer 3

可以试试 find 方法

var it = arr.find(function(item){
    return item.status == 0
})

console.log(it)
返回了该item

Answer 4

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

Answer 5

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

---