Question

Vue JS：

new Vue({
el: '#app',
data: {
results: {
  device: [{
    deviceName: "",
    info: [{value: ""}]
  }]
}

index.html：

<tr v-for="device in results.device" >

    <td>{{device.deviceName}}</a></td>

    <!--:class="{ false: v-for='info in device.info' !info.value }"-->

    <td v-for="info in device.info" :class="{ false: !info.value }">{{info.value}}
    </td>

</tr>

这里有2吨。

对于1st td，正在显示所需的值，但是我希望根据从info.value返回的值突出显示设备。

在任何地方您都可以看到td单元格不突出显示。但是，即使一行中的1列值都为false，该值和设备名称也应突出显示。

我正在尝试使用注释的代码来实现该目标，并在第1天的td上绑定了该类。

但是，该语法似乎是错误的。

我要的是根据info.value中的值突出显示整个tr。

第二个td按预期工作。

因此，我需要有关第一个td或包装tr的帮助。

Answer 1

在任何地方您都可以看到td单元格不突出显示。但是，即使一行中的1列值都为false，该值和设备名称也应突出显示。

Codepen：https://codepen.io/anon/pen/VRgYXB

添加一种方法来检查所有值是否为

methods:{
  flasecond(index){
    let res = false
     this.results.device[index].info.forEach(info=> {
        if(!info.value) res = true
    })
      return res
  }
}

和html

 <tr v-for="(device, index) in results.device"  >
  <td :class="{'falseclass' : flasecond(index)}">{{ device.deviceName }}</td>
  <td v-for="info in device.info" :class="{'falseclass' : !info.value}">{{info.value}}</td>
</tr>

在基于v-for和v-if的Vue JS中添加CSS类

1 个答案: