style 里面怎么使用数据绑定 (vue 2.x 版本)

Question

<div v-bind:style="{margin-left: test + 'px' }"></div>
这样写报错
v-bind directives require an attribute value

Answer 1

CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来
文档写的很清楚。如果按照你的写法，就是

<div v-bind:style="{'margin-left': test + 'px' }"></div>

或者

<div v-bind:style="{marginLeft: test + 'px' }"></div>

望采纳：）

Answer 2

1.对象语法形式绑定<div v-bind:style="styleObject"></div>
2.数组语法形式绑定<div v-bind:style="[baseStyles, overridingStyles]"></div>
3.直接class<div v-bind:class="[class1,class2]"></div>

Answer 3

思路：
<div v-bind:style="style"></div>

data(){
let test = 100;
return{
style:'margin-left:'+ test + 'px'
}
}