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

3108 ワード

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"であり、そうでない場合は""である.