Vue动态样式 :class

Vue动态样式 :class

使用:class实现css动态样式。

语法①：（写在标签里）className可以加上''，也可以不加引号。

:class = "{className1:(条件1),className2:(条件2)}"

语法②：

<span :style="{color:(scope.row.status==2) ? 'red' : '#007bd9','text-decoration': (scope.row.status==2) ? 'line-through' : 'none'}">{{scope.row.projectMoney}}</span>

展示语法①的使用：

<template>
  <div>
    <el-row style="margin-left:100px;">
      <el-col v-for="item in num" :key="item">
        <span :class = "{className1:(item==1),className2:(item==2)}">{{item}}</span>
      </el-col>
    </el-row>
​
  </div>
</template>
<script>
export default {
  data () {
    return {
      num: [1, 2, 3]
    }
  },
  methods: {
​
  }
}
</script>
<style scoped lang="less">
.className1{
  color: red;
}
.className2{
  color: blue;
}
</style>
​

以上:class根据条件判断结果分配给相应标签class如下：（根据此class写相应css）

效果如下：

原文章：（14）:class用法_w_t_y_y的博客-CSDN博客_:class用法