vue.js如何添加類到錶行取決於屬性值

Question

我想添加bootstrap類（成功，正在減少...）錶行取決於propertys（overallStatus）值。

我該如何在下面的代碼中實現這個功能性？

在此先感謝！

<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> 

在同一時間，你可以像這樣綁定多個類：

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

或

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