vue.js样式绑定

class

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

class属性绑定

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

示例1

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


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为：

class="active">

示例2

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


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 类的背景色：


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的渲染结果是一样的。

相关阅读:
floating-ui react-dom-interactions：如何将浮动元素宽度设置为与参考宽度相同
在c++项目中你必须真正使用的15个c++特性
Pytorch 之torch.nn初探池化--Pooling Layers
半平面求交 - 洛谷 - P3194 [HNOI2008] 水平可见直线
2023双十一爆冷收场，订单后暗藏这些电商痛点问题需要注意
二百三十四、Linux——导出CentOS 7已安装的软件包为离线安装包
java项目-第134期ssm社团管理系统-java毕业设计
Maven下载及环境搭建
基于YOLOv5的车牌识别系统（YOLOv5+LPRNet）
html5里引用vue.js，实现自定义组件，子父组件相互传参

原文地址：https://blog.csdn.net/m0_68633696/article/details/126124843