3.6 样式绑定-优快云博客

本文链接：https://blog.youkuaiyun.com/PengK_aha/article/details/128063414

本文详细介绍了Vue.js中动态绑定class和style的用法，包括对象语法和数组语法的使用，以及如何结合使用以实现条件样式切换。通过示例代码展示了如何根据数据属性控制元素的类名和内联样式，同时也探讨了默认样式的处理方法。

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

一、class样式处理

     对象语法 (类名: 是否显示)
   <div v-bind:class="{active: isActive,error: isError}">

   数组语法
   <div v-bind:class="[activeClass, errorClass]">

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active {
				border: 1px solid red;
				width: 100px;
				height: 100px;
			}
			.error {
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="{active: isActive,error: isError}">
				测试样式1:对象语法
			</div>
			<button v-on:click="handle">切换1</button>
			
			<div v-bind:class="[activeClass, errorClass]">
				测试样式2:数组语法
			</div>
			<button v-on:click="handle2">切换2</button>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	1.class样式处理
	对象语法 (类名: 是否显示)
	<div v-bind:class="{active: isActive,error: isError}">
	
	数组语法
	<div v-bind:class="[activeClass, errorClass]">
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
				 activeClass: 'active',
				 errorClass: 'error',
				 isActive: true,
				 isError: true,
			},
			methods: {
				handle: function () {
					//控制isActive的值 在true 和 false 之间进行切换
					this.isActive = ! this.isActive;
					this.isError = ! this.isError;
				},
				handle2: function () {
					//控制activeClass 的值
					var result = this.errorClass;
					result == ''? this.errorClass = 'error': this.errorClass = '';
				}
			}
		});
	</script>
</html>

二、样式绑定相关语法细节:

   1. 对象绑定和数组绑定可以结合使用
   <div v-bind:class="[activeClass, errorClass, {test: isTest}]">

   2. class绑定的值可以简化操作
   数组: arrClass: ['active', 'error']
   对象: objClass: { active: true, error: true }

   3. 默认的class如何处理?
   默认的class会保留

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active {
				border: 1px solid red;
				width: 100px;
				height: 100px;
			}
			.error {
				background-color: orange;
			}
			.test{
				color: blue;
			}
			.base{
				font-size: 28px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div v-bind:class="[activeClass, errorClass, {test: isTest}]">
				测试样式1
			</div>
			<button v-on:click="handle">切换</button>
			
			<div v-bind:class="arrClass">
				测试样式2-1
			</div>
			
			<div v-bind:class="objClass">
				测试样式2-2
			</div>
			<div class="base" v-bind:class="objClass">
				测试样式3
			</div>
			
		</div>
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	样式绑定相关语法细节:
	1. 对象绑定和数组绑定可以结合使用
	<div v-bind:class="[activeClass, errorClass, {test: isTest}]">
	
	2. class绑定的值可以简化操作
	 数组: arrClass: ['active', 'error']
	 对象: objClass: { active: true,  error: true }
	 				
	3. 默认的class如何处理?
	 默认的class会保留
	
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 msg: "hello",
				 activeClass: 'active',
				 errorClass: 'error',
				 isTest: true,
				 arrClass: ['active', 'error'],
				 objClass: {
					 active: true,
					 error: true,
				 }
			},
			methods: {
				handle: function (event) {
					this.isTest = !this.isTest;
					this.objClass.error = ! this.objClass.error;
				}
			}
		});
	</script>
</html>

三、style样式处理

   对象语法 (类名: 是否显示)
   ① <div v-bind:style='{border:borderStyle, width: widthStyle, height: heightStyle}'>
   ② <div v-bind:style='objStyle'>
   objStyle: { border: '1px solid green', width: '200px', height: '100px' }

   数组语法
   <div v-bind:style='[objStyle, overrideStyles]'>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div v-bind:style='{border:borderStyle, width: widthStyle, height: heightStyle}'>
				对象语法1
			</div>
			<div v-bind:style='objStyle'>
				对象语法2
			</div>
			<div v-bind:style='[objStyle, overrideStyles]'>
				数组语法1
			</div>
			<button v-on:click='handle'>切换</button>
		</div>
		
	</body>
	
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" >
	
	/*
	1.style样式处理
	对象语法 (类名: 是否显示)
	① <div v-bind:style='{border:borderStyle, width: widthStyle, height: heightStyle}'>
	② <div v-bind:style='objStyle'>  
	objStyle: {  border: '1px solid green',  width: '200px',  height: '100px'  }
						
	数组语法
	<div v-bind:style='[objStyle, overrideStyles]'>
	 */
		var vm = new Vue({
			el:'#app',
			data:{
				 borderStyle: '1px solid blue',
				 widthStyle: '100px',
				 heightStyle: '200px',
				 objStyle: {
					 border: '1px solid green',
					 width: '200px',
					 height: '100px'
				 },
				 overrideStyles: {
					 border: '5px solid orange',
					 backgroundColor: 'blue'
				 }
			},
			methods: {
				handle: function () {
					//控制高度
					this.heightStyle = '100px';
				
				}
				
			}
		});
	</script>
</html>