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

最新推荐文章于 2024-09-23 18:07:56 发布
最新推荐文章于 2024-09-23 18:07:56 发布
阅读量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通过JSON绑定多个class案例
零小唬的博客
12-28 233
vue.js：使用v-bind通过JSON绑定多个class案例
Vue.js 中的 v-bind 指令：作用与使用详解
My_wife_QBL的博客
07-05 2354
在 Vue.js 中，指令是以v-前缀开头的特殊属性。指令的值可以是 JavaScript 表达式，用于在 DOM 元素上添加特定的行为。v-bind指令是 Vue.js 中用于动态绑定 HTML 属性和组件属性的重要指令。通过v-bind指令，可以将 Vue 实例中的数据动态地绑定到 HTML 元素的属性上，从而实现数据的动态更新和响应式渲染。v-bind指令的基本用法包括绑定 HTML 属性、绑定组件属性和绑定动态属性。高级用法包括绑定对象、绑定数组和绑定计算属性。在实际开发中，v-bind。
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 中的 v-bind 指令详解
it_xushixiong的博客
06-09 2750
Vue.js中的v-bind指令是一种将组件的属性绑定到Vue实例的数据的方式。v-bind指令可以用于将任何组件属性绑定到Vue实例的数据上，例如class、style、属性等。v-bind指令允许我们动态地设置组件的属性，从而使组件更加灵活和可重用。v-bind指令可以使用简写形式进行使用，即通过添加一个前缀符号，例如:class:style等。这使得代码更加简洁和易于阅读。在本文中，我们将深入探讨v-bind指令的使用方法和一些实际的代码示例。
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...
学习Vue3骨架+异步组件(defineAsyncComponent)+Suspense
weixin_49352307的博客
09-19 304
template #defalut> 显示用户内容。<template #fallback> 显示骨架。利用Suspense插槽合理显示骨架与用户界面。
Vue + element-ui实现动态表单项以及动态校验规则
qq_44242707的博客
09-19 538
项目需要实现一个功能，表单中某个表单项产品id支持动态新增多个产品id表单项，每个产品id表单项都需要有校验规则，校验失败时各自有对应的校验提示。
Vue使用Vue Router路由：开发单页应用
最新发布
pan_junbiao的博客
09-23 833
在单页 Web 应用中，整个项目只有一个 HTML 文件，不同视图（组件的模块）的内容都是在同一个页面中渲染的。当用户切换页面时，页面之前的跳转都是在浏览器端完成的，这时就需要使用前端路由。路由实际上就是一种映射关系。例如，多个选项卡之间的切换就可以使用路由功能来实现。在切换时，根据鼠标的点击事件显示不同的页面内容，这相当于事件和事件处理程序之间的映射关系。
vue 案例使用
buhuidage的博客
09-17 436
加上show-password就行。el-switch 按键的使用。
计算机毕业论文基于VUE的贫困生助学信息审核管理系统开发与实现
计算机程序开发设计
09-23 541
贫困生助学审核信息管理系统旨在为学校提供一个高效、透明的平台，用于管理和审核贫困生的助学申请。系统主要分为三个角色：管理员、审核员和贫困生。每个角色有不同的权限和功能，以确保系统的正常运行和数据的安全性。
【Vue】- 路由及传参
不靠谱先森的博客
09-18 1325
什么是单页面应用程序?● 所有功能在一个html页面上实现单页面应用优缺点?● 优点：按需更新性能高，开发效率高，用户体验好● 缺点：学习成本，首屏加载慢，不利于SEO应用场景?● 系统类网站 / 内部网站 / 文档类网站 /移动端站点什么是路由？○ 路由是一种映射关系Vue中的路由是什么?○ 路径和组件 的映射关系○ 根据路由就能知道不同路径的，应该匹配渲染哪个组件如何实现路径改变，对应组件切换,应该使用哪个插件?○ Vue 官方插件 VueRouter。
Vue.js教程：v-bind详解与class、style用法示例
"这篇文章主要探讨了Vue.js框架中的v-bind属性、class和style的使用方法，通过实例展示了如何在Vue应用中动态绑定元素属性、切换CSS类和控制内联样式。" 在Vue.js中，v-bind是一个非常重要的指令，用于将数据绑定到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值