vue :class和:style

曹振华

已于 2023-04-13 10:56:19 修改

阅读量146

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： javascript vue.js 前端 class style

于 2023-04-13 10:53:15 首次发布

本文链接：https://blog.youkuaiyun.com/chadcao/article/details/130125259

vue.js 专栏收录该内容

6 篇文章

订阅专栏

该代码示例展示了如何在Vue.js中使用数据绑定动态地切换元素的CSS类和内联样式。通过`:class`和`:style`指令，结合三元表达式，可以根据组件的状态改变元素的外观，例如，当isActive和isError为真时，应用active和error类，以及切换文字颜色和背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1）代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.base {
				font-weight: bold;
			}

			.active {
				color: red;
			}

			.error {
				background-color: blue;
			}
		</style>
		<script type="text/javascript" src="vue.min.js"></script>
	</head>
	<body>
		<div id="vm">
			<!-- 属性切换class -->
			<div class="base" :class="{'active':isActive}">属性切换class</div>
			<div class="base" :class="[{'active':isActive},{'error':isError}]">属性切换class</div>
			<!-- 使用三元表达式切换class -->
			<div class="base" :class="isActive?'active':''">三元表达式切换class</div>
			<div class="base" :class="[isActive?'active':'',isError?'error':'']">三元表达式切换class</div>
			<!-- 三元表达式切换style -->
			<div :style="{color:(isActive?'red':'blue')}">三元表达式切换style</div>
			<div :style="[{color:(isActive?'red':'')},{background:(isError?'blue':'')}]">三元表达式切换style</div>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#vm',
			data: {
				isActive: true,
				isError: true
			},
			methods: {}
		});
	</script>
</html>

2）效果