一，回顾

1，v-bind指令

在前面我们已经使用过v-bind指令了，它的基本用途是动态更新HTML元素上的属性。

它还支持指令缩写，

2，计算属性

计算属性computed就是内部可以对各属性进行计算的Vue属性。一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，并响应式地返回一个结果。

二，绑定class

在数据绑定中，最常见的两个需求就是元素的样式名称class和内联样式 style 的动态绑定，它们也是HTML的属性，因此可以使用v-bind:class指令。

1，对象语法

1，绑定单字段
我们可以传给 v-bind:class 一个对象，以动态地切换class：

<div v-bind:class="{ active: isActive }"></div>

类名active依赖于数据isActive：当isActive为true时，div会拥有类名active，为false时则没有，例如：

<div id="app">
	<div v-bind:class="{ active: isActive }">{{a}}</div>
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			a: 1,
			isActive: true
		},
	})
</script>

结果如下：

class属性的值为active。

2，绑定多字段：
还可以在对象中传入更多字段来动态切换多个class，原理是一样的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>

		<style type="text/css">
			#app {
				color: blue;
				font-size: 20px;
			}
			.error {
				color: red;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="static" v-bind:class="{ active: isActive }">a is {{a}}</div>
			<div class="static" v-bind:class="{ active: isActive, 'error': hasError }">
				a is {{a+1}}, wrong!
			</div>
		</div>

		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					a: 1,
					isActive: true,
					hasError: true
				},
			})
		</script>
    </body>
</html>

结果如下：

当然，绑定的数据对象不一定要内联定义在模板里，只要能传过去一个bool值就行：

data: {
  classObject: {
    active: true,
    'error': true
  }
}

3，使用计算属性进行绑定
当:class表达式过长或逻辑复杂时，还可以绑定计算属性。

<div id="app">
	<div v-bind:class="classObject"></div>
		a is {{a}}
	</div>
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
		  a: 6,	
		  isActive: true,
		  error: null
		},
		computed: {
		  classObject: function () {
		    return {
		      active: this.isActive && !this.error,
		      'text-danger': this.error && this.error.type === 'fatal'
		    }
		  }
		}
	})
</script>

除了计算属性，也可以直接绑定Objectt类型的数据，或者使用类似计算属性的methods.

2，数组语法

除了使用Json格式进行class绑定外，还能使用数组进行绑定，例如：

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

结果class被渲染为：

<div class="active text-danger"></div>

当然也能使用三元表达式实现class条件切换：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

errorClass将始终被添加，就像我们在绑定class之前单独使用了class=”static”一样。

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

3，在组件上使用

三，绑定内联样式

v-bind:style指令绑定内联样式，方法与使用:class参数绑定class类似，也有对象语法和数组语法。

1，对象语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>

		<style type="text/css">
			#app {
				color: blue;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">test</div>
		</div>

		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
				    activeColor: 'red',
				    fontSize: 30
				}
			})
		</script>
    </body>
</html>

结果如下：

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

2，数组语法

数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

3，自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

4，多重值

从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，但只会渲染数组中最后一个被浏览器支持的值。例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/98109.html

Vue：Class与Style绑定

一，回顾

1，v-bind指令

2，计算属性

二，绑定class

1，对象语法

2，数组语法

3，在组件上使用

三，绑定内联样式

1，对象语法

2，数组语法

3，自动添加前缀

4，多重值

相关推荐