Vue入门教程--对元素进行样式绑定详解（article:6）

Vue.js 初步入门

---

方法简介

1. 使用class绑定样式。
2. 使用内联样式style绑定。

使用详情

原生js中，样式的绑定有两种，第一种是直接在标签属性style里赋予自己想自定义的属性：

<div id="container">
    <div style = "color:'blue'">
        {{hello}}
    </div>
</div>

let app = new Vue({
		el:"#container",
		data:{
			hello:"hello vue.js"
		},
		methods:{
			
		}
});

第二种是给标签定义id或者class，然后在样式域给特定的id或class不同的样式：

	<style type="text/css">
		.blue{
			color:blue;
			background-color: #FFC0CB;
		}
		.thin{
			font-weight: 150;
		}
		.size{
			width: 100px;
			height: 100px;
		}
	</style>

<div id="container">
    <div class="blue size">
        {{hello}}
    </div>
</div>

let app = new Vue({
		el:"#container",
		data:{
			hello:"hello vue.js"
		},
		methods:{
			
		}
});

---

- 使用class绑定样式

vue给用户提供了属性绑定，让用户能够灵活的对class属性进行赋值。

	<style type="text/css">
		.blue{
			color:blue;
			background-color: #FFC0CB;
		}
		.thin{
			font-weight: 150;
		}
		.size{
			width: 100px;
			height: 100px;
		}
	</style>

1.数组

<div :class="['blue','size']">
	{{hello}}
</div>

2. 数组中使用三元表达式

<div :class="['blue','size',isactive?'thin':'']">
	{{hello}}
</div>

data:{
	hello:"hello vue.js",
	isactive:false
}

3.数组中嵌套对象

<div :class="['blue','size',{thin:isactive}]">
	{{hello}}
</div>

4. 直接使用对象

<div :class="{blue:true,thin:false,size:isactive}">
	{{hello}}
</div>

---

- 使用class绑定样式

1. 直接在元素上通过:style传入对象进行样式的绑定

<div :style="{color:blue,'font-weight': 150}">
	{{hello}}
</div>

2. 将样式写到数据域中，再引入

data:{
	hello:"hello vue.js",
	isactive:true,
	myStyle1:{color:'blue','font-weight':'150'}
}

<div :style="myStyle1">
	{{hello}}
</div>

3. 将多个样式数据放到数据域中，并用数组引用多个样式对象

data:{
	hello:"hello vue.js",
	isactive:true,
	myStyle1:{color:'blue','font-weight':'150'},
	myStyle2:{'font-size':'40pt',width:'100px',height:'100px'}
}

data:{
	hello:"hello vue.js",
	isactive:true,
	myStyle1:{color:'blue','font-weight':'150'},
	myStyle2:{'font-size':'40pt',width:'100px',height:'100px'}
}

---