JavaScript
您现在的位置是:博客主页 > Web教程 > JavaScript

VueJs Class 与 Style 绑定 数组语法

By 钱伯斯 on JavaScript Time 2019-12-29 from:互联网 367人已围观
简介:    操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。

我们可以把一个数组传给 v-bind:class,以应用一个 class 列表:

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为:

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

如果你也想根据条件切换列表中的 class,可以用三元表达式:

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
这样写将始终添加 errorClass,但是只有在 isActive 是 truthy[1] 时才添加 activeClass。


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

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

演示案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Class 与 Style 绑定->绑定HTML CLASS 对象语法</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="static" v-bind:class="[activeClass, errorClass]">activeClassOne</div>
			<div class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">activeClassTwo</div>
			<div class="static" v-bind:class="[{ active: isActive }, errorClass]">activeClassThree</div>
		</div>
		<script type='text/javascript'>
			var app = new Vue({
				el: '#app',
				data: {
				  activeClass: 'active',
				  errorClass: 'text-danger',
				  isActive: true,
				}
			});
		</script>
		<style>
			.static{
				color: #333;
				padding: 0.5rem;
				margin: 0.1rem;

			}
			.text-danger{
				color: #ff3b1d;
			}
			.active{
				background:#f5f5f5;
			}
		</style>
	</body>
</html>

文件尺寸 84.368 KB
下载次数 0( 次 )
本地下载 本地下载
相关文章
文章评论

( 0 )