006_Vue class样式绑定

最新推荐文章于 2024-05-01 01:05:58 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-05-01 01:05:58 发布

阅读量275

点赞数 1

分类专栏： vue 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/aihiao/article/details/122852150

版权

vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

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. 效果图

5.3. 点击2个切换样式按钮

自由与束缚JavaJavaScript

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
006_Vue 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
复制链接

扫一扫

专栏目录