vue 动态样式
<p :style="{width:'4px',height: '24px',background: '#f7ce51'}"></p>
<p:style="{height: '400px','overflow-y': 'auto','background-color': '#f3f3f3',padding: '15px'}"></p>
1、三元运算符判断
<div :style="{ 'opacity': !editableCheckNum ? 0.5 : 1 }">555</div>
2、动态设置class
<div :class="activeMachineId === machineItem.machineId?'activeStyle':'machineBar'" v-for="(machineItem,machineIndex) in machineList" @click="clickMachineEvent">
<p>{{machineItem.name}}</p>
<p :style="machineStatusStyle(machineItem.status)"></p>
</div>
3、方法判断
<div class="machineBigBar machineList">
<div class="machineBar" v-for="(machineItem,machineIndex) in processItem.machineList" :key="machineIndex">
<p>{{machineItem.name}}</p>
<p :style="machineStatusStyle(machineItem.status)"></p>
</div>
</div>
methods:{
machineStatusStyle(e){
console.log('值',e)
if(e === 1){
return {
width:'14px',height:'16px',
background:"url('/src/images/time.png') no-repeat center",
marginLeft: '10px'
}
}else if(e === 2){
return {
width:'14px',
height:'16px',
background:"url('/src/images/time.png') no-repeat center",
marginLeft: '10px'
}
}else if(e === 3){
return {
width:'14px',
height:'16px',
background:"url('/src/images/time.png') no-repeat center",
marginLeft: '10px'
}
};
}
4、数组绑定
<div :class="[activeStyle, defaultStyle]"></div>
5、computed结合es6对象的计算属性名方法
<div :class="dynClass">测试</div><script>
let activeStr = 'activeStyle';
let isAActive = true;
let isBActive = false;
export default {
computed: {
dynClass () {
return [
`${activeStr}`,
{
['name']: isAActive, // 属性是条件，条件成立，则创建该属性
['age']: isBActive
}
]
}
},
}
</script>
解析： <div class="activeStyle name">测试</div>
