Vuejs 添加条件样式格式

Question

我有一个简单的表格呈现，我想根据该单元格中的值向单元格添加一些条件 css 样式格式。 例如

如果area1 == 'one'的值赋值td-onecss样式

      <tr v-for="version in versions" :key="version.id">
        <td>{{version.name}}</td>
        <td>{{version.area1}}</td>
        <td>{{version.area2}}</td>
        <td>{{version.area1}}</td>
        <td>{{version.area4}}</td>
      </tr>

脚本：

<script>
export default {
  name: 'versions-table',
  props: {
    msg: String
  },
  data () {
    return {
      versions: [
              {
                id: '1',
                name: 'Name1',
                area1: 'one',
                area2: 'one',
                area3: 'two',
                area4: 'three'
              }
           ]
        }
    }
}

CSS

<style scoped>
  table {
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
  }
  td {
    padding: 5px;
  }

  .td-one {
    background-color: green;
  }

  .td-two{
    background: red;
  }

  .td-three{
    background-color: blue;
  }
</style>

Answer 1

您可以使用class binding 如下：

  <td :class="{'td-one':version.area1 == 'one'}">{{version.area1}}</td>

等等