SOURCE

new Vue({
    el: "#app",
    data: {
        styleObj: {
            color: 'red'
        },
        bg: {
            backgroundColor: 'blue',
            color: '#fff'
        }
    },
    computed: {
        styleByComputed() {
            return {
                backgroundColor: 'orange',
                color: '#fff'
            }
        }
    },
    methods: {
        getColor() {
        	return `hsl(${Math.floor(Math.random() * 360)}, 75%, 85%)`
    	}
    }
})

<div id="app">
    <!-- 表达式形式，可以是data中的数据，也可以是计算属性中的数据 -->
    <p :style="styleObj">set inline styel width data</p>
    <p :style="styleByComputed">set inline style width computed</p>
    
    <!-- 对象形式，value为属性值，key为属性名。value也可以是表达式计算的返回值 -->
    <p :style="{color:'orange'}">set inline styel width object</p>
    <p :style= "{color: 12 < 10 ? 'red' : 'yellow'}">set inline style width object base on condition</p>
    <p :style="{color: getColor()}">set inline styel width object base on method</p>
    
    <!-- 数组形式，用于指定一个或多个样式对象。如果有相同样式名，后面会覆盖前面 -->
    <p :style="[bg,styleObj]">set inlne style with array</p>
    <p :style="[12 > 10 ? bg : styleObj]">set inline style with array base on condition</p>
</div>