有没有一种方法可以根据vue.js中的值更改文本颜色？

Question

我试图在一个列中添加一个样式类，使其与它大于或小于一个值相符？这些值是服务器完成请求所花费的时间。如果超过.1，我希望它铺成红色，如果低于，我希望铺成绿色。

我试图在vue的网站和元素上找到一些东西。

<el-table-column label="Duration"  >
        <template slot-scope="scope">
          <span>{{scope.row.response.duration}}</span>
        </template>
      </el-table-column>

.079绿色 .12红色

Answer 1

我认为您的意思是动态样式和班级分配。 https://vuejs.org/v2/guide/class-and-style.html

例如，您有一个value: 10，如果value超过5，则您希望文本为绿色：

<span :class="greentextclass: value > 5">My text</span>