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

<div class="app">
			<a
				v-bind:class="classFn"
				v-bind:title="titleFn"
				v-bind:href="hrefFn"
				v-bind:target="targetFn"
			>	
			{{text}}
			</a>
</div> 
 <script type="text/javascript">
		//语法格式1：单个语法格式
		var app = new Vue({
			el:'.app',
			data:{
				classFn:'aName',
				titleFn:'百度',
				hrefFn:'http://www.baidu.com',
				targetFn:'_blank',
				text:'百度一下'
			}
		})
	</script>

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

<div class="app">
			<a v-bind="{class:link.class,title:link.title,href:link.href,target:link.target}">	
			{{link.info}}
			</a>
</div>
<script type="text/javascript">
		//语法格式2：对象语法格式
		var app = new Vue({
			el:'.app',
			data:{
				link:{
					class:'aaa',
					title:'百度',
					href:'http://www.baidu.com',
					target:'_blank',
					info:'百度'
				}
			}
		})
</script> 

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

<div class="app">
			<a v-bind:class='[class1,class2,class3]' :href="hrefFn">{{info}}</a>
</div>
<script type="text/javascript">
		var app = new Vue({
			el: '.app',
			data: {
				info: '百度一下',
				class1: 'a1',
				class2: 'a2',
				class3: 'a3',
				hrefFn: 'http://www.baodu.com'
			}
		})
</script>

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

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

<div  :class="{active:isActive}"
data: {
				isActive:false,
			}

isActive为true时，结果为下图：

isActive为false时，结果为下图：

上面案例中，类名active依赖于数据isActive。当其值为true时，div拥有该类名active，为false时则没有

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

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

<div class="demo">
	<div  :class="{active:isActive,pei:jiajing,zuo:mengjia}"></div>
</div>
<script type="text/javascript">
	var demo = new Vue({
	el: '.demo',
	data: {
				isActive:false,
				jiajing:true,
				mengjia:true
			}
	})
</script>

• v-bind:class 指令也可以与普通的 class 属性共存，例如
  class=app和其他类名共存

<div class="demo">
	<div class='app'  :class="{active:isActive,pei:jiajing,zuo:mengjia}"></div>
</div>
<script type="text/javascript">
	var demo = new Vue({
	el: '.demo',
	data: {
				isActive:false,
				jiajing:true,
				mengjia:true
			}
	})
</script>

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

<div class="demo">
	<div :class="classObject"></div>
</div>
<script type="text/javascript">
	var demo = new Vue({
	el: '.demo',
	data: {
				classObject: {
					jiajai: true,
					huihui: true,
					jiaojiao: true
				}
			}
	})
</script>

对象包裹形式优点：如果需要添加一个class时，只需要在变量里添加属性，并设置该属性为true即可，所以相对来说更加自由。

• 点击按钮，虽然原本itsClass这个变量并没有red这个属性，但后续添加这个属性也会在该div里添加red这个class类名。如下图：
  
  当:class的表达式过长或者逻辑复杂时，可以绑定计算属性，这是一种友好且常见的语法。如下图：
  
  当需要应用多个class时，可以使用数组语法，给class绑定一个数组，应用一个class列表，例如。
  

class-数组语法-表达式1

• 可以使用三元/目运算符来根据条件切换class，例如
  

class-数组语法-表达式2

案例2：例如下图：
首先它是数组，因此第一个g存在，因此有样式名fontGreen；
其次，是一个三元表达式，会判断r的值，如果为true（或隐式转换为true），那么就绘将r的值添加到数组，否则添加s的值。

当class为多条件时，三元表达式写法较为繁琐，可以在数组里嵌套对象，使用对象写法，如下。

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

当class为多条件时，三元表达式写法较为繁琐，可以在数组里嵌套对象，使用对象写法，如下。

class-数组语法-计算属性

• 与对象语法一样，当:class的表达式过长或者逻辑复杂时，可以绑定计算属性computed，这是一种友好且常见的语法。
  
• 使用计算属性给元素动态设置类名，在业务里经常遇到，尤其在表达式较长或者逻辑复杂时，推荐使用计算属性。

内联样式style-对象语法

• v-bind:style 的对象语法十分直观，看着非常像 CSS，但其实是一个 JS对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
  

内联样式style-对象包裹语法

• 这样会让模板更加清晰

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

• 也可以用计算属性用法绑定
  
  以上就是v-bind类名与样式绑定的分析，有问题留言小编，嘿嘿