VUE之v-bind类名与样式绑定

• 课程

• （1）v-bind回顾

• （2）class-对象语法

• （3）class-数组语法

• （4）内联样式style-对象语法

• （5）内联样式style-计算属性语法

前言

• DOM元素经常动态绑定一些类名或者style样式，本节讲解下使用v-bind指令绑定class与style的多种方法。
• 之前介绍过v-bind基本用法及语法糖，主要用于动态更新HTML元素属性，接下来简单回顾下。

(1)v-bind回顾 (动态属性修饰符：v-bind)

• v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。
  
• 语法格式1：单个语法格式
• v-bind:attributeName=variable

<div id="demo">
			<a 
			v-bind:class="classValue"
			v-bind:title="titleValue"
			v-bind:target="targetValue"
			v-bind:href="hrefValue"
			>{{text}}</a>
</div>
var demo = new Vue({
			el:'#demo',
			data:{
				text:'百度',
				classValue:'one two three',
				titleValue:'百度一下，你就知道',
				targetValue:'触发者',
				hrefValue:'www.baidu.com'
			}
		}) 		

• 语法格式2：对象语法格式
• v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”
• 案例：在页面中利用Vue实例的变量制作一个超级链接

<div id="demo">
			<a 
			v-bind="{
				class:link.class,
				href:link.href,
				title:link.title,
				target:link.target
			}"
			>
			{{link.text}}</a>
</div>
var demo = new Vue({
			el:'#demo',
			data:{
				link:{
					text:'百度',
					class:'one two three',
					href:'http://www.baidu.com',
					title:'百度一下你就知道',
					target:'top'
				}
			}
		})

• 语法格式3：数组语法格式”绑定类名”
• v-bind:attributeName=“[variable1,variable2,……]”
• 案例（绑定类名）：

<div id="demo">
			<a v-bind:class="[class1,class2,class3]" :href="hrefFn">{{text}}</a>
</div>
var demo = new Vue({
			el:'#demo',
			data:{
				text:'百度',
				class1:'aaa',
				class2:'bbb',
				class3:'ccc',
				hrefFn:'http://www.baidu.com'
			}
		})

class-对象语法-单类名切换

• 给v-bind:class设置一个对象，可以动态切换class。
• 语法：传给 v-bind:class 一个对象，以动态地切换 class：

<div :class="{active:isActive}"></div>
data:{
				isActive:true,	/*isActive为true时显示类名*/
}

• isActive为true时，结果为 (如下图)
• isActive为false时，结果为（如下图）
  
  
• 上面案例中，类名active依赖于数据isActive。当其值为true时，div拥有该类名active，为false时则没有

class-对象语法-多类名切换

• 除了单个类名切换，在对象中也可以传入多个属性来动态切换多个 class

<div class="demo">
		 <:class="{active:isActive,area:isArea,target:isTaget}"></div>
</div>
var demo= new Vue({
			/*挂载根实例到元素上*/
			el:'.demo',
			/*绑定数据*/
		data:{
				isActive:true,	/*isActive为true时显示类名*/
				isArea:false,	/*isArea为false时不显示类名*/
				isTaget:true
			}
		})

class-对象语法-类名共存

• v-bind:class 指令也可以与普通的 class 属性共存

<div class="aaa" :class="{active:isActive,area:isArea,target:isTaget}"></div>
data:{
			isActive:true,	/*isActive为true时显示类名*/
			isArea:false,	/*isArea为false时不显示类名*/
			isTaget:true
		}

class-对象语法-对象包裹

• 绑定的数据对象不必都定义在模板里，也可以用一个大对象包裹起来

<div class="demo">
			<div :class="classObject"></div>
</div>
var demo = new Vue({
			/*挂载根实例到元素上*/
			el:'.demo',
			/*绑定数据*/
			// data:{
			// 	/*绑定的数据对象不必都定义在模板里，也可以用一个大对象包裹起来	例如：*/
			classObject:{
				isActive:true,
				isArea:true,
				isTaget:true
		}
			 }
		})

• 对象包裹形式优点：如果需要添加一个class时，只需要在变量里添加属性，并设置该属性为true即可，所以相对来说更加自由。
• 点击按钮，虽然原本itsClass这个变量并没有red这个属性，但后续添加这个属性也会在该div里添加red这个class类名。
  

class-对象语法-计算属性

• 当:class的表达式过长或者逻辑复杂时，可以绑定计算属性，这是一种友好且常见的语法。
  

class-数组语法-普通数组

• 当需要应用多个class时，可以使用数组语法，给class绑定一个数组，应用一个class列表，例如。
  
• class-数组语法-表达式1
• 可以使用三元/目运算符来根据条件切换class，例如
  
• class-数组语法-表达式2
  

class-数组语法-数组对象嵌套

• 当class为多条件时，三元表达式写法较为繁琐，可以在数组里嵌套对象，使用对象写法，如下。
  
  class-数组语法-计算属性
• 与对象语法一样，当:class的表达式过长或者逻辑复杂时，可以绑定计算属性computed，这是一种友好且常见的语法。
  
• 使用计算属性给元素动态设置类名，在业务里经常遇到，尤其在表达式较长或者逻辑复杂时，推荐使用计算属性。
• 内联样式style-对象语法
• v-bind:style 的对象语法十分直观，看着非常像 CSS，但其实是一个 JS对象。CSS 属性名可以用驼峰式
  (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
  
• 内联样式style-对象包裹语法
• 大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在data或者computed里，以data为例，修改上面案例：
  
  这样会让模板更加清晰。

内联样式style-计算属性语法

• 也可以用计算属性用法绑定
  

以上是小编写的今天的课程，如有问题请随时联系小编！