七、vue中使用样式

一、v-bind绑定class

1、数组

<h1 :class="['red','thin']">使用样式</h1>

渲染结果：

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

<div id="app">
	<h1 :class="['red','thin',isActive ? 'active':'']">使用样式</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	var vm=new Vue({
		el:'#app',
		data:{
			isActive:true
		}
	})
</script>

渲染结果：

 

3、数组中嵌套对象

<div id="app">
        <!--isActive为true就显示active类否则不显示-->
	<h1 :class="['red','thin',{'active':isActive} ]">使用样式</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	var vm=new Vue({
		el:'#app',
		data:{
			isActive:true
		}
	})
</script>

渲染结果：

 

4、直接使用对象

<div id="app">
	<h1 :class="{'red':false,'thin':true,'active':true}">使用样式</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	var vm=new Vue({
		el:'#app',
		data:{
		}
	})
</script>

渲染结果：

 

把对象放在data中：

<div id="app">
	<h1 :class="classObj">使用样式</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	var vm=new Vue({
		el:'#app',
		data:{
			classObj:{'red':false,'thin':true,'active':true}
		}
	})
</script>

渲染结果和上面的是一样的，只是把对象放在了data中。

 

二、v-bind绑定内联样式style

1、直接在元素上通过:style的形式，书写样式对象：

<div id="app">
	<!--样式属性有中横线必须用引号引起来-->
	<h1 :style="{color:'red','font-weight':200,'font-size':fontSize}">使用样式</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	var vm=new Vue({
		el:'#app',
		data:{
			fontSize:16+'px' //也可以在data中动态定义样式属性的值
		}
	})
</script>

2、在data中定义样式，将样式对象定义到data中，并直接引用到:style中：

<div id="app">
	<h1 :style="styleObj">使用样式</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	var vm=new Vue({
		el:'#app',
		data:{
			styleObj:{color:'red','font-weight':200,'font-size':'16px'}
		}
	})
</script>

3、在:style中通过数组，引用多个data中定义的样式对象

<div id="app">
	<h1 :style="[styleObj1,styleObj2]">使用样式</h1>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">	
	var vm=new Vue({
		el:'#app',
		data:{
			styleObj1:{color:'red','font-weight':200,'font-size':'16px'},
			styleObj2:{fontStyle:'italic'}//样式属性使用驼峰命名将自动解析为中横线的形式，例如fontStyle自动解析后变成font-style
		}
	})
</script>