v-bind绑定样式

v-bind 的功能

• v-bind 用于绑定一个或多个属性值 或者向另一个组件传递props值
• 开发标签属性的动态绑定

v-bind绑定 class

// 用法一：直接绑定一个对象
<h2 :class='{'active':isAcive,...}'> </h2>
// 用法 二： 和 普通的类同时存在  如果isAcive 为 true  类名会有两个 title active
<h2  class=‘title’  :class='{'active':isAcive,...}'> </h2>
// 用法三： 如果过于复杂  可以放在一个 method或者 computed中 注： classes 是一个计算属性 也可以是一个函数
<h2  class=‘title’  :class='classes()'> </h2>

methods:{
	classes(){
		return  {'active':this.isAcive}

	}

}
//用法四： 数组用法 类名 会有  active fs-color
<h2  class=‘title’  :class='[qwer,yui]'> </h2>
data:{
	qwer：'active'，
	yui:'fs-color'
}

v-bind 绑定style

//方式一、 对象语法
：style='{color：currentColor，font-size：fontSize + 'px'}'
// 对象的key 是css属性名称
//对象的value是具体赋的值  值可以来自于data 中的属性
// 方式二、数组语法
：style= ‘[baststyle,overflowles]’
// baststyle 如果没加引号  则是变量 
data:{
	baststyle：{background：red},
	overflowles:{overflow:hiddden}
}