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)
效果如下: