vue.js样式绑定

最新推荐文章于 2023-03-20 16:27:04 发布

余月初贰

最新推荐文章于 2023-03-20 16:27:04 发布

阅读量300

点赞数 3

文章标签： vue.js 前端 javascript

mkbk

本文链接：https://blog.csdn.net/m0_68633696/article/details/126124843

版权

class

class和style是html元素的属性，用于设置元素的样式。我们可以用v-bind来设置样式属性。Vue.js v-bind在处理class和style是，专门增强了它。表达式的结果练习除了字符串之外，还可以是对象或数组。

class属性绑定

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

示例1

例子中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.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>

以上示例div class为：

<div class="active"></div>

示例2

text-danger 类背景颜色覆盖了 active 类的背景色：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></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>

以上示例div class为：

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

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

示例3

text-danger 类背景颜色覆盖了 active 类的背景色：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.active {
				width: 100px;
				height: 100px;
				background: green;
			}

			.text-danger {
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="classObject"></div>
		</div>

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

示例3和示例2的渲染结果是一样的。

余月初贰

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js样式绑定

class和style是html元素的属性，用于设置元素的样式。我们可以用v-bind来设置样式属性。Vue.js v-bind在处理class和style是，专门增强了它。表达式的结果练习除了字符串之外，还可以是对象或数组。
复制链接

扫一扫