Question

我想通过vue.js在r.data2上显示红色，但它无法正常工作，是否有任何提示进行调试？

数据＆＃39;行＆＃39;每秒更新一次计时器。＆＃39;状态＆＃39;，＆＃39;数据1＆＃39;，＆＃39;数据2＆＃39;在服务器端生成。

  vm = new Vue({
    el: '#app',
    data: {
       rows: [{Status:1, data1:"d1", data2:"d2"}]
    }
  })
  ...   
  <tr v-for="r in rows">                                                          
    <td><button class="st-{{r.Status}}">r.data1</button></td>
    <td valign="top">                                                             
      <div v-if="r.Status == 4">                                                  
        <font color="red">{{r.data2}}</font>                          
      </div>                                                                      
      <div v-else>                                                                
        {{r.data2}}                                                   
      </div>                                                                      
    </td>                                                                         
  </tr>

Answer 1

您是否尝试过Vue docs中给出的类和样式绑定？

参考：https://vuejs.org/guide/class-and-style.html#Object-Syntax-1

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

和您的数据：

data: {
    activeColor: 'red',
    fontSize: 30
}

该示例是来自上述文档链接的复制粘贴。看看吧！

评论＃1后编辑的答案：

最好的方法是使用数组语法进行类绑定，如下所示：

<div v-bind:class="['some-static-class-for-your-data', { 'danger-class' : data2 == 4 }]">
    my data2 value = {{data2}}
</div>

设置一个像：

的CSS

.danger-class {
    color: red;
}

现在，只要您的data2的值为4，就会出现“危险等级”。将在你的div上设置。您的CSS确保它以红色或您选择的任何颜色显示。

如果您有其他数据类，可以使用some-static-class

将其放在上面的示例中

最好设置有意义的类名而不是硬编码样式。所以我不建议你去寻找样式绑定，尽管你可以这样做。查看类和样式绑定的docs链接。

突出显示一个元素的正确方法是什么？

1 个答案: