v-bind binding style

The function of v-bind

• v-bind is used to bind one or more property values ​​or pass props values ​​to another component
• Develop dynamic binding of label attributes

v-bind binding 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 bind style

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