vue中样式绑定class和style

		<style type="text/css">
			.test{
				width: 200px;
				height: 200px;
				background: skyblue;
			}
			.test1{
				width: 200px;
				height: 200px;
				background: pink;
			}
		</style>

		<div class="app">
			<p :style="{fontSize:fontSize+'px',color:aColor}">我是一个p标签</p>
			<h1 :style="styleObj">我是h1标签</h1>
			<h2 :style="[styleObj,bcolor]">11334566</h2>
			<div :class="{test:isClick,test1}"></div>
			<div :class="classObj" @click="changOrder">{{message}}</div>
			<div :class="classObj">{{changeOrder}}</div>
			<button @click="changeClass">点我</button>
			<div :class="[isShow?'test':'' ,two]"></div>
		</div>

#添加类名

通过v-bind绑定类名

1、对象语法

例如： :class="{cname1,cname2…}"

cname1:表示类名，需要在vue实例的data中声明

对象里面可以应用表达式

2、数组语法

例如：:class="[cname,cname2…]"

数组里面可以应用表达式

添加样式

#1、对象语法

例如：:style="{pname:pvalue,pname1:pvalue1}"

pname:属性名

pvalue：属性值需要在data里面定义

:style=“obj”

obj:是一个由css属性构成的对象

2、数组语法

例如：:style="[styleobj1,styleobj2]"

styleobj1,styleobj2:是一个由css属性构成的对象

			var vm =new Vue({
				el:".app",
				data:{
					isClick:true,
					isShow:false,
					message:"hello",
					test1:"test1",
					one:"test",
					two:"two",
					fontSize:50,
					aColor:"red",
					styleObj:{
						fontSize:30+"px",
						color:"skyblue",
						transform:"scale(1.2)"
					},
					bcolor:{color:"red"}
				},
				methods:{
					changeClass:function(){
						this.isClick = !this.isClick,
						this.isShow = !this.isShow
					},
					changOrder:function(){
						this.message = this.changeOrder
					}
				},
				computed:{
					changeOrder:function(){
						return this.message.split("").reverse().join("");
					},
					classObj:function(){
						return "test";
					}
				}
			})