006_Vue class样式绑定

Vue.js中class样式绑定的使用方法

最新推荐文章于 2025-02-17 15:12:51 发布

原创最新推荐文章于 2025-02-17 15:12:51 发布 · 322 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

vue 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了Vue.js中class样式的四种绑定方式：对象语法、数组语法、对象和数组结合形式以及简化写法，并通过代码示例和实际效果展示了如何切换和管理元素的样式类。

1. class样式绑定处理

1.1. 对象语法

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

1.2. 数组语法

<div v-bind:class="[active1Class, active2Class]"></div>

2. class样式绑定-对象形式

2.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>class样式绑定-对象形式</title>

		<style type="text/css">
			.import {
				width: 400px;
				height: 50px;
				border: solid 1px;
				display: block;
			}
			.title {
				font-weight: bold;
				color: red;
			}
			/*默认类*/
			.base {
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<span class="base" v-bind:class="{import: isImport, title: isTitle}">对象绑定class</span><br />
				<button @click="handle">切换样式</button>
			</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					isImport: true,
					isTitle: true
				},
				methods: {
					handle: function(event) {
						this.isImport = false;
					}
				}
			});
		</script>
	</body>
</html>

2.2. 效果图

2.3. 点击切换样式按钮

3. class样式绑定-数组形式

3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>class样式绑定-数组形式</title>

		<style type="text/css">
			.import {
				width: 400px;
				height: 50px;
				border: solid 1px;
				display: block;
			}
			.title {
				font-weight: bold;
				color: red;
			}
			/*默认类*/
			.base {
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<span class="base" v-bind:class="[importClass, titleClass]">数组绑定class</span><br />
				<button @click="handle">切换样式</button>
			</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					importClass: "import",
					titleClass: "title"
				},
				methods: {
					handle: function(event) {
						this.titleClass = "";
					}
				}
			});
		</script>
	</body>
</html>

3.2. 效果图

3.3. 点击切换样式按钮

4. class样式绑定-对象和数组结合形式

4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>class样式绑定-对象和数组结合形式</title>

		<style type="text/css">
			.import {
				width: 400px;
				height: 50px;
				border: solid 1px;
				display: block;
			}
			.title {
				font-weight: bold;
				color: red;
			}
			/*默认类*/
			.base {
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<span class="base" v-bind:class="[importClass, {title: isTitle}]">对象和数组结合使用绑定class</span><br />
				<button @click="handle">切换样式</button>
			</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					isTitle: true,
					importClass: "import"
				},
				methods: {
					handle: function(event) {
						this.importClass = "";
						this.isTitle = false;
					}
				}
			});
		</script>
	</body>
</html>

4.2. 效果图

4.3. 点击切换样式按钮

5. class样式绑定-简化写法

5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>class样式绑定-简化写法</title>

		<style type="text/css">
			.import {
				width: 400px;
				height: 50px;
				border: solid 1px;
				display: block;
			}
			.title {
				font-weight: bold;
				color: red;
			}
			/*默认类*/
			.base {
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<span class="base" v-bind:class="objClasses">对象简化绑定class</span><br />
				<button @click="handle1">切换样式</button>
			</div>

			<br />
			
			<div>
				<span class="base" v-bind:class="arrClasses">数组简化绑定class</span><br />
				<button @click="handle2">切换样式</button>
			</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					objClasses: {import: true, title: true},
					arrClasses: ["import", "title"]
				},
				methods: {
					handle1: function(event) {
						this.objClasses.import = false;
						this.objClasses.title = false;
					},
					handle2: function(event) {
						this.arrClasses.splice(0, this.arrClasses.length);
					}
				}
			});
		</script>
	</body>
</html>

5.2. 效果图