Vue.js实战——v-bind及class与style绑定

最新推荐文章于 2024-09-21 11:29:05 发布
最新推荐文章于 2024-09-21 11:29:05 发布
阅读量299 收藏
点赞数
分类专栏： # Vue基础 文章标签： vue vue.js html5 es6 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Aran_/article/details/104690188
版权

参考：《Vue.js实战》梁灏

1. 绑定class的几种方式

1.1 对象语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind绑定Class之对象语法</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div :class="{'active':isActive}"></div>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					isActive:true
				}
			});
		</script>
	</body>
</html>

上面示例中，类名active依赖于数据isActive，当其为true时，div会拥有该类名，否则没有，对象中可以传入多个属性，以进行动态切换，且:class与普通class可以共存：

.<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绑定多个属性及与class共存</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div class="static" :class="{'active':isActive,'error':isError}"></div>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					isActive:true,
					isError:true
				}
			});
		</script>
	</body>
</html>

当:class的表达式过长或逻辑复杂时，可以考虑使用计算属性：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用计算属性绑定class</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div :class="classes"></div>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					isActive:true,
					// error:null,
					error:{
						type:'fail'
					}
				},
				computed:{
					classes:function(){
						return {
							active:this.isActive && !this.error,
							'text-fail':this.error && this.error.type === 'fail'
						}
					}
				}
			});
		</script>
	</body>
</html>

1.2 数组语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind数组语法</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div :class="[activeCls,errorCls]"></div>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
						el:"#app",
						data:{
							activeCls:'active',
							errorCls:'error'
						}
			});
		</script>
	</body>
</html>

也可以使用三元运算符根据条件切换class：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind三元运算符绑定数组class</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div :class="[isActive? activeCls:'',errorCls]"></div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
					el:"#app",
					data:{
						isActive:true,
						activeCls:'active',
						errorCls:'error'
					}
			});
		</script>
	</body>
</html>

class有多个条件时，这样写较为麻烦，可以在数组语法中使用对象语法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bin在数组中使用对象语法绑定class</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div :class="[{'active':isActive},errorCls]"></div>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					isActive:true,
					errorCls:'error'
				}
			});
		</script>
	</body>
</html>

当然，与对象语法一样，也可以使用data、computed和methods三种方法，以计算属性为例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性绑定</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<button type="button" :class="classes">这是个按钮</button>
		</div>
		<script type="text/javascript">
			var app = new Vue({
					el:"#app",
					data:{
						size:'large',
						disabled:true
					},
					computed:{
						classes:function(){
							return [
								'btn',
								{
									['btn-'+this.size]:this.size !=='',
									['btn-disabled']:this.disabled
								}
							]
						}
					}
			});	
		</script>
	</body>
</html>

1.3 在组件上使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在组件上使用v-bind</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<my-component :class="{'active':isActive}"></my-component>
		</div>
		
		<script type="text/javascript">
			Vue.component('my-component',{
				template:"<p class='article'>一些文本</p>"
			})
			
			var app = new Vue({
				el:"#app",
				data:{
					isActive:true
				}
			});
		</script>
	</body>
</html>

2 绑定内联样式（不常用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绑定内联样式</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div id="app">
			<!-- 直接写css -->
			<div :style="{'color':color,'fontSize':fontSize + 'px'}">文本</div>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					color:'red',
					fontSize:14
				}
			});
		</script>
		
		<!-- 第二种，写在data里-->
		<div id="app2">
			<div :style="styles">文本2</div>
		</div>
		<script type="text/javascript">
				var app2 = new Vue({
						el:"#app2",
						data:{
							styles:{
								color:'red',
								fontSize:18+'px'
							}
						}
				});
		</script>
		
		<!-- 第三种，写在computed里 -->
		<div id="app4">
			<div :style="styles2">文本3</div>
		</div>
		
		<script type="text/javascript">
			var app3 = new Vue({
				el:"#app4",
				data:{
					color:'red',
					fontSize:28
				},
				computed:{
					styles2:function(){
						return{
						'color':this.color,
						'font-size':this.fontSize+"px",};
					}
				}
			});
		</script>
	</body>
</html>

应用多个样式时，可以使用数组语法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多个样式-数组绑定</title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div :style="[styleA,styleB]">示例文本</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					 
				},
				computed:{
					styleA:()=>{
						return {"color":'red'};
					},
					styleB:()=>{
						return {"fontSize":'30px'};
					}
				}
			});
		</script>
	</body>
</html>

使用style时，Vue.js会自动给特殊的CSS属性名称增加前缀，如transform。

Done!

Aran_
关注
专栏目录
VUE 学习（六）样式绑定v-bind:class和v-bind:style
qq_43434300的博客
08-26 676
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>VUE学习-样式绑定</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> .active{ width: 100px; .
vue v-bind 三元表达式 动态绑定 选中的样式
小道仙的后宫
12-19 9425
效果如下：   也就是随着我们的鼠标点击而去选中某一个选项。   我们需要之前写好 两组样式，也就是没有选中，和选中的样式。 然后我们使用 v-bind 加上三元表达式来实现。   实现思路： 我们定义一个 active 的变量，给它一个默认值， 当我们点击了某一个标签，就让这个 active 的值等于 这个标签的值。也就是选中那个标签的意思。 下面给出实现代码。 至于两组 ...
Vue学习笔记----v-bind：class和style绑定
Model_Vincent的博客
11-15 856
1.动态绑定class 1.1对象语法 &lt;div v-bind:class="{ active: isActive }"&gt;&lt;/div&gt; &lt;div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"&gt; &lt;/div&gt; data: {
Vue.js基础-06-绑定样式（v-bind）-01-绑定class属性（v-bind:class）
运维玄德公
05-28 2038
1. class 属性绑定 语法示例 完整示例 2. 属性的覆盖 2.1 绑定多个值相互覆盖 语法示例 完整示例 2.2 绑定一个对象（对象成员间覆盖） 语法示例 完整示例 3. 绑定对象的计算属性 语法示例 完整示例 4. 绑定数组 4.1 直接绑定一个数组 语法示例 完整示例 4.2 覆盖顺序 4.3 绑定一个是数组的object 4.4 控制数组成员是否生效 语法示例 完整示例 再次强调顺序...
vue.js：使用v-bind通过数组绑定多个class案例
零小唬的博客
12-28 570
vue.js：使用v-bind通过数组绑定多个class案例
Vue.js 中的 v-bind 指令：作用与使用详解
My_wife_QBL的博客
07-05 2332
在 Vue.js 中，指令是以v-前缀开头的特殊属性。指令的值可以是 JavaScript 表达式，用于在 DOM 元素上添加特定的行为。v-bind指令是 Vue.js 中用于动态绑定 HTML 属性和组件属性的重要指令。通过v-bind指令，可以将 Vue 实例中的数据动态地绑定到 HTML 元素的属性上，从而实现数据的动态更新和响应式渲染。v-bind指令的基本用法包括绑定 HTML 属性、绑定组件属性和绑定动态属性。高级用法包括绑定对象、绑定数组和绑定计算属性。在实际开发中，v-bind。
vue.js：使用v-bind通过JSON绑定多个class案例
零小唬的博客
12-28 233
vue.js：使用v-bind通过JSON绑定多个class案例
Vue.js实战学习—v-bind及class与style绑定
u011229269的博客
12-20 172
Vue.js实战学习—v-bind及class与style绑定 4.1、v-bind指令 主要用于动态绑定更新HTML元素上的属性。 4.2绑定class的几种方式 4.2.1 对象语法 给v-bind:class设置一个对象，可以动态地切换class，例如： &lt;div id="app"&gt; &lt;div :class="{'active':isActive}"&gt;&lt;...
vue.js—v-bind绑定Class与Style
理想主义的花最终会盛开在浪漫主义的土壤里，我的热情永远不会熄灭在现实的平凡之中，我们终将上岸，阳光万里。
06-30 5893
v-bind用于动态地绑定一个或者多个attribute,或者一个porp到表达式。首先明确一下attribute的概念，什么是attribute，attribute 是元素标签的属性。那什么是元素标签的属性？以HTML为例，例如: 这篇博客主要总结的是v-bind绑定class和style这一种情况。在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。我们可以传给 v-bind:class 一个对象，以动态地切换 cl
Vue.js官方文档2----Class 与 Style 绑定、条件渲染（v-if）、列表渲染（v-for遍历数组对象）
long_steve的博客
09-21 1041
在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染。
Vue.js中用v-bind绑定class的注意事项
10-20
关于数据绑定一个常见...因为它们都是属性，我们可以用 v-bind 处理它们，但是使用v-bind绑定class的时候我们要有一些注意事项，下面这篇文章就给大家分享了下要注意的方面，希望能对大家有所帮助，下面来一起看看吧。
浅析Vue.js中v-bind v-model的使用和区别
10-17
v-bind可以绑定如class、style、href等属性，并在属性值变化时自动更新对应的DOM元素属性。其使用方法是在属性后面加上v-bind指令和冒号，然后跟上绑定的数据，例如： ```html <a v-bind:href="url">访问我的网站...
详解vue中v-model和v-bind绑定数据的异同
10-14
本篇文章将深入解析Vue中的两种主要数据绑定方式：`v-model` 和 `v-bind`，以及它们之间的异同。 `v-bind`（通常简写为 `:`）主要用于单向数据绑定，即将Vue实例中的数据属性绑定到HTML元素的属性上。例如，使用 `v...
vue基础之v-bind属性、class和style用法分析
10-17
在Vue.js中，`v-bind`是一个非常重要的指令，用于动态地绑定属性到我们的组件或者元素上。在本文中，我们将深入探讨`v-bind`如何与`class`和`style`一起工作，来实现动态的样式和类管理。 首先，让我们从`v-bind`的...
文件系统设计 - 开发文件系统 Store (上篇)
最新发布
qq_44746132的博客
09-21 344
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
学习Vue3骨架+异步组件(defineAsyncComponent)+Suspense
weixin_49352307的博客
09-19 249
template #defalut> 显示用户内容。<template #fallback> 显示骨架。利用Suspense插槽合理显示骨架与用户界面。
Vue + element-ui实现动态表单项以及动态校验规则
qq_44242707的博客
09-19 489
项目需要实现一个功能，表单中某个表单项产品id支持动态新增多个产品id表单项，每个产品id表单项都需要有校验规则，校验失败时各自有对应的校验提示。
基于Vue 3组合函数的分页、搜索与排序实践 —— nbsaas-boot项目的实际应用
nbsaas-boot基于Request-Response的企业级快速开发框架
09-17 1937
Vue 3的组合函数是用于封装功能逻辑的一种模式。与Vue 2的选项式API不同，组合函数允许开发者将组件逻辑集中封装在独立的函数中，便于在不同的组件间共享。在大型项目中，像这样的电商系统，组件往往需要实现复杂的数据交互逻辑，例如分页、搜索、排序等功能。如果将这些功能重复写在多个组件中，代码将会变得臃肿且难以维护。组合函数可以有效解决这一问题。
vue 案例使用
buhuidage的博客
09-17 401
加上show-password就行。el-switch 按键的使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值