// Class 的对象写法
<span :class="{'green-class' : scope.row.hiddenStatus === '已整改', 'blue-class' : scope.row.hiddenStatus === '待整改', 'red-class': scope.row.hiddenStatus === '未整改'}"> {{ scope.row.hiddenStatus }} </span>
// Class的数组写法
<span :class="[scope.row.hiddenStatus === '已整改' ? 'green-class' : scope.row.hiddenStatus === '待整改' ? 'blue-class' : 'red-class']"> {{ scope.row.hiddenStatus }} </span>
// Style的对象写法
<span :style="{color: (scope.row.hiddenStatus === '已整改' ? 'green' : scope.row.hiddenStatus === '待整改' ? 'blue' : 'red')}"> {{ scope.row.hiddenStatus}} </span>
// Style的数组写法
:style="[{color:(index==0?'red':'green')},{fontSize:'20px'}]"
Vue中class和style的动态绑定
于 2023-02-15 14:08:28 首次发布