Question

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

如果 area1 == 'one' 的值分配td-one CSS样式

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

以此类推

Vue.js添加条件样式格式

1 个答案: