vue学习（绑定class、v-bind：style（对象语法、数组语法））⽂章⽬录
vue 属性绑定
css
.class0{
color: red;
font-size: 10px;
}
.class00{
color: blue;
font-size: 70px;
}
.
class2{
color: yellow;
font-size: 30px;
}
.class3{
color: indianred;
}
.class4{
font-size: 30px;
}
1 class绑定
1.1 字符串绑定
<div id="app1">
可以绑定⼀个默认class 字符串绑定class
<p class="class0":class="a"> xxxx是字符串</p>
<button @click="updates1">点击</button>
</div>
// 1.1 字符串绑定
var a =new Vue({
el:'#app1',
data:{
//绑定默认css属性
a:"class1",
b:"class0",
},
//动态切换css属性
methods:{
updates1(){
this.a ='class2'
}
}
});
1.2 对象绑定和数组绑定
<div id="app2">
对象绑定class
<p :class="{class2:isA,class00:isB}"> xxxx是对象例如 :class="{class2:isA,class00:isB}"</p> <button @click="updates2">点击</button><br>
数组绑定class <br>
<p :class="['class3','class4']"> xxxx是数组例如 :class="[class3,class4]" </p>
</div>
//1.2 对象绑定
var a =new Vue({
el:'#app2',
data:{
//绑定默认css属性
isA:true,
isB:false,
},
//动态切换css属性
methods:{
updates2(){
this.isA =false;
this.isB =true;
}
}
});
图⽰
点击后
fontweight属性bold
2 style 绑定
<div id="app3">
<div :>Style 绑定1 例如  :</div> <div :>Style 绑定2(绑定到⼀个样式对象通常更好)  例如  :</div>
<div :>Style 绑定3(数组语法)  例如  :</div>
<button @click="updates4">点击</button>
</div>
// 2 style  绑定
var a =new Vue({
el:'#app3',
data:{
//绑定默认css属性
activeColor:'red',
fontSize:100,
objectCssStyle:{
color:'red',
fontSize:'10px'
},
objectCssStyle2:{
color:'yellow'
},
clSty1:{
color:'green',
fontSize:'30px'
},
clSty2:{
'font-weight':'bold'
}
},
//动态切换css属性
methods:{
updates4(){
this.activeColor ="blue";
this.fontSize =20;
this.objectCssStyle =this.objectCssStyle2
}
}
});
图⽰
点击后

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。