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>