v-bind以及class与style的绑定

v-bind

v-bind的作用,是绑定活的属性!

绑定class 的几种形式

对象语法

• 绑定class对象语法:
• 对象的键是类名
• 值是布尔值
  就像下面这么写

<div :class = "{active: isActive, box: isBox}"></div>
//active和box是类名,isActive和isBox是布尔值,控制类名是否出现在class上

• isActive和isBox的布尔值直接储存在data中,如果是true,那么就有这个属性,如果是false,那就没这个属性

data{
    
    
isActive:true,
isBox:false
}

还可以绑定计算属性,输出对象语法

这样写的好处是,html文本上简洁很多

//直接class引用计算属性
<div :class = "classnames"></div>
//下面是Vue实例计算属性对象的内容
computed:{
    
    
	classnames:function(){
    
    
		return {
    
    
			active: this.isActive $$ !this.isBox
		}
	}
}

数组语法

数组和对象有一些区别

• 绑定数组的语法:
• 数组中的成员直接对应类名

<div :class = "[activeClass, boxClass]"></div>
//下面是Vue实例中data属性的内容
data:{
    
    
activeClass:'active',
boxClass:'box'
}

对象语法和数组语法的混用

• 这样一来,既可以控制active,又可以让'box'类名一直存在dom元素上.

<div :class = "[{'active':isActive}, boxClass]"></div>
//下面是Vue实例中data属性的内容
data:{
    
    
isActive:true,
boxClass:'box'
}

绑定style属性(内联样式)

v-bind还可以直接控制style属性,来控制css样式

对象语法

• 绑定内联样式:
• 键代表style的属性值(css的属性名)
• 键值就代表属性值的值(css属性名的值)
• 注意,这个键需要加冒号
  切记 Vue中,只要是驼峰命名,他都会给你转换成’-'加小写,比如font-szie= fontSize

<div :style = "{'color':color,'fontSize':fontsize}"></div>
//下面是Vue实例中data属性的内容
data:{
    
    
color: 'red',
fontSize:'16px'
}

数组语法

style属性的数组语法比较简单直观,直接引用data数据就可以了,那data数据可以直接就是个对象,写的跟css一样

<div :style = "[styleA,styleB]"></div>
//下面是Vue实例中data属性的内容
data:{
    
    
	styleA: {
    
    
		'color': 'red'
},
	styleB: {
    
    
		'font-size': '100px'
}
}

• 应用多个样式对象时,可以使用数组语法:实际使用中,style的数组语法并不常用.因为可以直接写在一个对象里面.而较为常用的是计算属性.
• 使用:style时,Vue.js会自动给特殊的css属性增加前缀.比如transform