vue 绑定内联样式要怎么绑定margin、padding这种呢？

Question

今天看到了vue的绑定内联样式，文档里说了:style="{x: ;x :}"，它是支持对象语法和数组语法的，
但如果说我要绑定margin属性呢？
在vue里:style="{ margin: 10px 10px 10px 100px; }"这种写法是可行的，但在绑定样式中，像下面这种

/*我给style绑定了一个返回对象的计算属性*/
computed: {
        styleObject() {
            return {
                margin: ['10px','10px','10px','100px']
                //marginTop: '10px',
                //marginRight: '10px',
                //marginBottom: '10px',
                //marginLeft: '100px',
            }
        }
    }

用数组向margin传值是不行的，跟vue文档里说的一样，只有margin分开写才能够成功渲染
所以我想一下子把margin全写了，该怎么写呢？

Answer 1

想css那样写法

computed: {

    styleObject() {
        return {
            margin: '10px 10px 10px 100px',
            //marginTop: '10px',
            //marginRight: '10px',
            //marginBottom: '10px',
            //marginLeft: '100px',
        }
    }
}

Answer 2

<div :style="cStyles"></div>

computed: {
    // 样式多可以用计属性，样式少，可以像动态 "className" 一样直接写在标签上
    cStyles () {
        return {
            margin: '10px',
            padding: '10px'
        }
    }
}