Vuejs2 Vuetables2如何向vue客户端表中的特定数据添加动态样式

我正在处理vue js和vue客户端表。我创建了一个vue客户机表，并将一些虚拟数据填充为静态数据

现在有一个列名称状态，它有两个值，即活动或不活动

我想将“非活动”的字体颜色更改为红色。 （表示链路已断开）

我需要帮助来理解它

以下我已附上我的代码：

Headings : [ 'APPLICATION NAME', 'URL','LAST ACCESSED','STATUS'],
tableData: [
            {
             "APPLICATION NAME": "Pannier",
                    "URL": "http://boston.com/urna/ut/tellus/nulla/ut/erat/id.js?magna=blandit&ac=ultrices&consequat=enim&metus=lorem",
                    "LAST ACCESSED": "5:07 PM",
                    "STATUS": 'Inactive'
                    },{
                    "APPLICATION NAME": "Kanlam",
                    "URL": "http://archive.org/rutrum/nulla/nunc/purus.jpg?ac=ametttis&sit=nibh&amet=ligula",
                    "LAST ACCESSED": "7:02 AM",
                    "STATUS": 'active'
                    }

下面我附上了我的照片：

一种简单的方法是使用，以便添加css类和

href

属性。看看官方文件。
这里有一个例子

Vue.use（VueTables.ClientTable）；
新Vue({
el:“应用程序”，
数据：{
列：[“应用程序名称”、“URL”、“状态”]，
表格数据：[
{
“应用程序名称”：“Pannier”，
“URL”：”http://boston.com/urna/ut/tellus/nulla/ut/erat/id.js?magna=blandit&ac=ultrices&consequat=enim&metus=lorem",
“最后访问”：“下午5:07”，
“状态”：“不活动”
},{
“应用程序名称”：“Kanlam”，
“URL”：”http://archive.org/rutrum/nulla/nunc/purus.jpg?ac=ametttis&sit=nibh&amet=ligula",
“最后访问”：“上午7:02”，
“状态”：“活动”
}],
}
});
.Inactive{
颜色：红色
}

Vue表2
谢谢，我发现，我还使用了另一种使用虚拟DOM函数的方法。