<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";
}
}
})