Vue.js 样式绑定

最新推荐文章于 2024-04-20 21:59:47 发布

Tong XU

最新推荐文章于 2024-04-20 21:59:47 发布

阅读量113

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_41700374/article/details/88950455

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Vue.js class

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

class 属性绑定

我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="{ active: isActive }"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>
</body>
</html>

我们也可以在对象中传入更多属性用来动态切换多个 class 。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
  <div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
	hasError: true
  }
})
</script>
</body>
</html>

我们也可以直接绑定数据里的一个对象：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 测试示例</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<style>
			.active {
				width: 100px;
				height: 100px;
				background: green;
			}
			.hello{
				background: palevioletred;
			}
		</style>
	</head>

	<body>

		<div id="app">
			<div v-bind:class="classObject"></div>
		</div>
		
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					classObject: {
						active: true,
						'hello': true
					}
				}
			});
		</script>
		
	</body>
</html>

数组语法

我们可以把一个数组传给 v-bind:class ，实例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
	<div v-bind:class="[activeClass, errorClass]"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>
</body>
</html>