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

今天看到了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全写了，该怎么写呢？

回答

想css那样写法

computed: {

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

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

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