H5W3
当前位置:H5W3 > 问答 > 正文

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'
        }
    }
}

本文地址:H5W3 » vue 绑定内联样式要怎么绑定margin、padding这种呢?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址