Vue 动态Style的几种写法

1、对象形式

<template>
    <div :style="{fontSize: `${fontSize}px`}">雨夹雪</div>
</template>

<script>
export default {
    data(){
        return{
            fontSize: 15
        }
    },
}
</script>

2、三元表达式

<div :style="{color:status == true ? 'red' : 'black'}">晴天</div>
<div :style="status == true ? 'color: red' : 'color:black'">雨天</div>

3、数组形式

<template>
    <div :style="[styleObj,styleFontWeight]">下雪了</div>
    <div :style="[styleObj,{fontWeight: fontWeight}]">雪停了</div>
    <div :style="[styleObj,{style?'font-weight: 600': 'font-weight:normal'}]">起风了</div>
</template>
<script>

export default {
    data(){
        return{
            style: true,
            styleObj:{
                color: 'red',
                fontSize: '12px'
            },
            styleFontWeight:{
                fontWeight: 'bold'
            },
            fontWeight: 600
        }
    },
}
</sctipt>

4、调用方法

<template>
    <div :style="getStyle()">龙卷风</div>
</template>

<script>
export default{

    methods:{
        getStyle(){
            return {
                color: '#333',
                fontSize: '14px'
            }
        }    
    }
}
</script>