样式绑定
处理样式的常用思路:
1.通过类名class影响标签的样式
class样式处理:
- 对象语法
通过v-bind绑定class,值通过对象的方式控制属性是否显示
<div id="app">
<!-- 利用v-bind绑定class,类名用对象(可以包含键值对)的方式表示 -->
<div v-bind:class="{active: isActive,back: isBack}">
<!-- 键值对的左边是类名,右边是类名对应的属性,一般以is开头,其值一般为Ture或者False -->
</div>
<button v-on:click="switcher">切换</button>
</div>
var vm=new Vue(
{
el:'#app',
/*用于告诉vue数据的填充位置,利用id等进行标注*/
data:
{
isBack:true,
isActive:true,
// 默认值为true
},
methods:
{
switcher:function(){
// 利用取反操作,控制isActive的值的切换,从而实现样式的更改
this.isActive=!this.isActive
this.isBack=!this.isBack
}
}
});
- 数组语法
将类放在数组里面,直接更改值来实现样式的转换
<div id="app">
<div v-bind:class="[activeClass,backClass]">
</div>
<button v-on:click="switcher">切换</button>
</div>
data:
{
activeClass:'active',
backClass:'back',
},
methods:
{
switcher:function(){
this.activeClass='';
}
//该法中,类的样式取决于值,如为空则无此类样式,可以设置其他值,使该类具有不同样式
样式绑定的相关语法细节:
- 对象绑定与数组绑定可以结合使用
<div v-bind:class="[activeClass,backClass],{test: isTest}"></div>
- class绑定的值可以简化操作
<div v-bind:class="arrayClasses"></div>
<div v-bind:class="objClasses"></div>
data:
{
arrayClasses:['active','back'],//数组的简化用法
objClasses:{
active:true
back:true
},
//对象的简化用法
}
methods:
{
switcher:function(){
this.objClasses= false;
}
- 默认的class该如何处理?
默认的class不会被覆盖,而会结合在一起,如下列中,默认的base类会和原本的类共同形成样式
<div class='base' v-bind:class='objClasses'></div>
2.直接更改标签的style属性,定义标签的内部样式
- 对象语法:
写的是具体在data中CSS样式中定义的值
当涉及到的属性较少时
<div v-bind:style="{border:borderStyle,width: widthStyle,height:heightStyle}"></div>
<button type="button" v-on:click="switcher()">切换</button>
data:
{
borderStyle:'1px solid blue',
widthStyle:'20px',
heightStyle:'100px',
},
methods:
{
switcher:function(){
this.widthStyle='50px'
}
属性较多时,可以使用简化的写法
<div v-bind:style="objStyles"></div>
<button type="button" v-on:click="switcher()">切换</button>
data:
{
objStyles:{
border:'3px solid red',
width:'45px',
height:'150px',
}
},
methods:
{
switcher:function(){
this.objStyles.width='90px';
}
- 数组语法
相当于能放多个对象简化后的语法
<div v-bind:style="[objStyles , overStyles]"></div>
data:
{
objStyles:{
border:'3px solid red',
width:'45px',
height:'150px',
},
// 这两之间,已有的属性会被后者覆盖,没有则联合显示
overStyles:{
border:'5px solid yellow',
backgroundColor:'blue',
},
},