Vue.js 使用v-bind:style绑定内联样式【笔记】

1、对象语法：

v-bind:style 的对象语法十分直观，看着非常像css，但其实是一个JavaScript对象，CSS属性名可以用驼峰式（cameCase）或短横线分隔（kebab-case，记得用引号括起来）来命名：

<div 
	:style="{color: color , fontsize: size}"
>hi Vue</div>

var vm = new Vue({
	el: "",
	data:{
		color: "#FF0000",
		size: "50px"
	}
});

:style的第一个color为对象的<font color='red">属性，第二个color为一个变量。

2、也可以使用三元运算符：

<div 
	:style="{ color: color , font-size: size , background: isRed? '#FF0000' : '' }"
>hi Vue</div>

var vm = new Vue({
	el: "",
	data:{
		color: "#FF0000",
		size: "50px",
		isRed: true,
	}
});

如果 isRed 为 true，则background为"#FF0000"，否则为""。