vue.js 如何根据属性值将类添加到表行

Question

我正在尝试根据属性 (overallStatus) 值将 Bootstrap 类(成功、减弱...)添加到表行。

我将如何在下面的代码中实现此功能？

提前致谢!

<div id="people" class="col-md-12">      
    <v-client-table :data="tableData" :columns="columns" :options="options"></v-client-table>
</div>   

Vue.use(VueTables.client, {
    perPage: 50, 
    skin: 'table table-condensed'
});

new Vue({
    el: "#people",
    ready: function () { },
    methods: {},
    data: {
        columns: ['deviceType', 'reasonForStatus', 'ip', 'monitorIsOn', 'freeSpace', 'cpuUsage', 'availableRam', 'statusTime'],
        options: {
            dateColumns: ['statusTime'],
            headings: {
                deviceType: 'Device Type',
                ip: 'Device Ip',
                reasonForStatus: 'ReasonForStatus',
                freeSpace: 'Free Space',
                cpuUsage: 'CPU Usage',
                availableRam: 'Available Ram',
                statusTime: 'Log Time'
            },
            templates: {
                deviceType: function (row) {
                    return row == 0 ? "Stander" : "Monitor";
                },
                availableRam: function (row) {
                    return row.availableRam + " mb.";
                },
                freeSpace: function (row) {
                    return row.freeSpace + " %";
                },
                cpuUsage: function (row) {
                    return row.cpuUsage + " %";
                },
            },

        },
        selectedLetter: '',
        tableData: tableItems,
    }
});

Answer 1

您需要使用 v-bind:class 指令(或更短的版本 :class)。看看docs here .

例子:

data: function () {
  return: {
     error: true,
     errorType: 'alert-error'
  }
}

<template>
  <div class="alert" :class="{ errorType: error }"</div>
</template>

<!-- or static text assignment -->

<template>
  <div class="alert" :class="{ 'alert-error': error }"</div>
</template>

这两者都会导致

<div class="alert alert-error"></div>

要同时绑定(bind)多个类，你可以这样做:

<template>
  <div :class="{ 'class1 class2 class3': error }"</div>
</template>

或

<template>
  <div :class="['class1', 'class2', error ? 'class3' : 'class4']"></div>
</template>