vue动态样式绑定

学习机器 | 苏菲

于 2020-06-28 16:30:46 发布

阅读量223

点赞数

文章标签： vue css

原文链接：https://www.cnblogs.com/web-zqk/p/10776797.html

版权

方法判断

<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'
            }
        };
    }
}