Vue.js v-bind:styleを使用してインラインスタイルをバインド【メモ】

1、対象文法:v-bind:styleのオブジェクトの構文は直感的で、cssによく似ていますが、実はJavaScriptオブジェクトです.CSSプロパティ名はラクダ式または短横線で区切られています(kebab-case、引用符で囲まれています).

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

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

:styleの最初のcolorが対象:'}"
>hi Vuediv>var vm = new Vue({ el: "", data:{ color: "#FF0000", size: "50px", isRed: true, } });
isRedがtrueの場合、backgroundは"#FF0000"であり、そうでない場合は""である.