如何在 vue.js 组件中设置表格样式

Question

我正在尝试在这个vue组件中设置表格的样式，我的理解是我需要从数据函数创建css，然后将其绑定到模板中的适当元素。

我想要做的是将以下 css 应用到我的表中

css:

 .table-striped>tr:nth-of-type(odd) {
   background-color: #f9f9f9
 }

vue 组件：

Vue.component('overview', {
    delimiters: [ '[[', ']]' ],
    props: ['job_execs'],
    template: `
      <div overview>
      <h3>Overview</h3>
      <table class="table table-striped table-bordered">
        <tr>
          <td>Start Time</td>
          <td>[[ job_execs[0].time_start ]]</td>
        </tr>
        <tr>
          <td>End Time</td>
          <td>[[ job_execs[0].time_end ]]</td>
        </tr>
        <tr>
          <td>Job</td>
          <td>http://placeholder</td>
        </tr>
      </table>
      </div>
    `,
    data: function() {
        return {
            divExample: {
                color: 'red',
                fontSize: '13px'
                }
        }
    },
});

我不知道如何 1. 从数据函数创建这个 CSS 和 2. 将它绑定到模板中。

我目前正在做一个项目，我需要采用现有的网络应用程序并将前端转换为 vue.js，从已经臃肿的 css 中提取我需要的 css 似乎真的很头疼存在，然后将其转换为为每个组件注入该 css 的 vue js 函数。

Answer 1

您可以使用以下方式将 css 属性绑定到 Vue 中的标签：

<tr>
    <td>Start Time</td>
    <td>[[ job_execs[0].time_start ]]</td>
</tr>
<tr v-bind:style="strippedTr">
    <td>End Time</td>
    <td>[[ job_execs[0].time_end ]]</td>
</tr>
<tr>
    <td>Job</td>
    <td>http://placeholder</td>
</tr>

...

data: function() {
    return {
        strippedTr: {
            'background-color': '#f9f9f9'
        }
    }
},