学习VUE第五天课程（VUE之v-bind类名与样式绑定——上篇）

课程大纲

（1）v-bind回顾
（2）class-对象语法
（3）class-数组语法
（4）内联样式style-对象语法
（5）内联样式style-计算属性语法

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

v-bind回顾

v-bind动态属性：常用于动态绑定HTML元素的属性，例如id、class、href、src等属性。改变任一方数据后都会实时更新。

• 语法格式1：单个语法格式
  v-bind:attributeName=variable
  
• 语法格式2：对象语法格式
  v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”
  案例：在页面中利用Vue实例的变量制作一个超级链接
  
• 语法格式3：数组语法格式”绑定类名”
  v-bind:attributeName=“[variable1,variable2,……]”
  案例（绑定类名）：
  

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

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

isActive为true时，结果为

isActive为false时，结果为

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

• 除了单个类名切换，在对象中也可以传入多个属性来动态切换多个 class。例如：
  
• v-bind:class 指令也可以与普通的 class 属性共存，例如：
  
• 绑定的数据对象不必都定义在模板里，也可以用一个大对象包裹起来，例如：
  
• 对象包裹形式优点：如果需要添加一个class时，只需要在变量里添加属性，并设置该属性为true即可，所以相对来说更加自由。
  
  以下为源码 HTML部分

	
		
		
		
		
		
	
	
		

			
背景颜色
			变色
		
	

css 代码

/* 代码初始化 */
* {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}

/* 代码主体 */
#app > div{
	width: 100px;height: 100px;
}
#app > .green{
	background: green;
}
#app > .red{
	background: red;
}

js 代码

new Vue({
	el: '#app',
	data: {
		itsClass: {
			green: true
		}
	},
	methods: {
		change: function() {
			this.itsClass.green = false;
			this.itsClass.red = true;
		}
	},
})

• 当:class的表达式过长或者逻辑复杂时，可以绑定计算属性，这是一种友好且常见的语法。
  
• 当需要应用多个class时，可以使用数组语法，给class绑定一个数组，应用一个class列表，例如。
  

class-数组语法-表达式1

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

class-数组语法-表达式2

案例2：例如

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

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

class-数组语法-计算属性

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

使用计算属性给元素动态设置类名，在业务里经常遇到，尤其在表达式较长或者逻辑复杂时，推荐使用计算属性。

内联样式style-对象语法

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

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

• 大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在data或者computed里，以data为例，修改上面案例：
  

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

如有疑问或者问题请留言联系小编！！！！！

感谢来访！！