08-不得不学的Vue.js基础之Class 与 Style 绑定

前端 · 2020-07-22 ·
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Class 与 Style 绑定</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<!--操作元素的class列表和内联样式是数据绑定的一个常见需求。因为他们都是attribute,所有我们可以使用v-bind 处理他们:只需要通过表达式计算出字符串结果即可。不过字符串拼接麻烦且易错,因此,在将v-bind用于 class和style时,Vue.js做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组-->
		<!--1.绑定 HTML CLASS:我们可以给v-bind:class一个对象,以动态地切换class-->
		<!--下面的语法表示 active 这个class存在与否取决于property isActive 的 truthiness
		在JavaScript中,truthy(真值)指的是在布尔值上下文中,转换后的值为真的值。所有值都是真值,除非它们被定义为 假值(即除 false、0、""、null、undefined 和 NaN 以外皆为真值)。
		JavaScript 中的真值示例如下(将被转换为 true,if 后的代码段将被执行):
		if (true)
		if ({})
		if ([])
		if (42)
		if ("foo")
		if (new Date())
		if (-42)
		if (3.14)
		if (-3.14)
		if (Infinity)
		if (-Infinity)
		-->
		<p v-bind:class="{active:isActive,'text-danger':hasError}">在JavaScript中,truthy(真值)指的是在布尔值上下文中,转换后的值为真的值。所有值都是真值,除非它们被定义为 假值(即除 false、0、""、null、undefined 和 NaN 以外皆为真值)。</p>
		<!--1.1.绑定的数据对象不必内联定义在模板里-->
		<p v-bind:class="classObject">在JavaScript中,truthy(真值)指的是在布尔值上下文中,转换后的值为真的值。所有值都是真值,除非它们被定义为 假值(即除 false、0、""、null、undefined 和 NaN 以外皆为真值)。</p>
		<!--1.2.我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:-->
		<p v-bind:class="classObject2">在JavaScript中,truthy(真值)指的是在布尔值上下文中,转换后的值为真的值。所有值都是真值,除非它们被定义为 假值(即除 false、0、""、null、undefined 和 NaN 以外皆为真值)。</p>

		<!--2.数组语法:我们可以把一个数组给 v-bind:class -->
		<p v-bind:class="[activeClass, errorClass]">数组语法</p>
		<!--2.1.如果你也想根据条件切换列表中的 class,可以用三元表达式: -->
		<p v-bind:class="[isActive ? activeClass : '', errorClass]">三元表达式</p>
		<!--2.2.当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法: -->
		<p v-bind:class="[{ active: isActive }, errorClass]">对象语法</p>

		<!--3.用在组件上:当一个自定义组件上使用 class property时,这些class将被添加到该组件的根元素上面。这个元素上已经存在的class不会被覆盖-->
		<my-component class="class3 class4"></my-component>
		<!--对于带数据绑定class也同样使用-->
		<my-component v-bind:class="{ active: isActive }"></my-component>

		<!--4.绑定内联样式:-->
		<!--对象语法:v-bind:style 的对象语法十分直观-看着非常像CSS;但实际是一个JavaScript对象。-->
		<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">绑定内联样式</p>
		<!--直接绑定到一个样式对象通常更好,这个会让模板更清晰-->
		<p v-bind:style="styleObject">绑定内联样式:样式对象</p>
		<!--对象语法常常结合返回对象的计算属性使用-->
		<p v-bind:style="styleObject2">绑定内联样式:样式对象(计算属性)</p>
		<!--4.1.数组语法:v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上:-->
		<p v-bind:style="[baseStyles, overridingStyles]">数组语法</p>
		<!--5.多重值:可以为 style 绑定中的 property 提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:
			这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 display: flex。
		-->
		<p v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">多重值</p>
	</div>
	<script>
		// 注册全局组件 my-component
		Vue.component('my-component',{
			template:`<p class="class1 class2">自定义组件上使用 class property</p>`
		})
		// 全局对象
		var vm = new Vue({
			el: "#app",
			data: {
				isActive:true,
				hasError:true,
				classObject:{
					active:true,
					'text-danger':true
				},
				error:null,
				activeClass: 'active',
				errorClass: 'text-danger',
				activeColor: 'red',
				fontSize: 30,
				styleObject:{
					color:'green',
					fontSize:'13px'
				},
				baseStyles:{
					color:'yellow',
					fontSize:'13px',
					background:'black'
				},
				overridingStyles:{
					color:'yellow',
					fontSize:'23px'
				}
			},
			computed:{
				classObject2:function(){
					return {
						active:this.isActive && !this.error,
						'text-danger':true
					}
				},
				styleObject2:function(){
					return {
						color:'blue',
						fontSize:'23px'
					}
				}
			}
			
		});
	</script>
</body>
</html>

以下是测试数据:

在JavaScript中,truthy(真值)指的是在布尔值上下文中,转换后的值为真的值。所有值都是真值,除非它们被定义为 假值(即除 false、0、""、null、undefined 和 NaN 以外皆为真值)。

在JavaScript中,truthy(真值)指的是在布尔值上下文中,转换后的值为真的值。所有值都是真值,除非它们被定义为 假值(即除 false、0、""、null、undefined 和 NaN 以外皆为真值)。

在JavaScript中,truthy(真值)指的是在布尔值上下文中,转换后的值为真的值。所有值都是真值,除非它们被定义为 假值(即除 false、0、""、null、undefined 和 NaN 以外皆为真值)。

数组语法

三元表达式

对象语法

绑定内联样式

绑定内联样式:样式对象

绑定内联样式:样式对象(计算属性)

数组语法

多重值

%