动态绑定class的对象语法

最新推荐文章于 2023-11-29 19:50:37 发布

朱振玉小迷弟

最新推荐文章于 2023-11-29 19:50:37 发布

阅读量128

点赞数 1

分类专栏： Vue学习笔记（带源码）文章标签： vue js javascript html

本文链接：https://blog.csdn.net/weixin_50357864/article/details/115051003

版权

Vue学习笔记（带源码）专栏收录该内容

16 篇文章 0 订阅

订阅专栏

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind</title>
		<style type="text/css">
			.active{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2>{{ message }}</h2>
			<h2 v-bind:class="{active:isActive,line:isLine}">{{ message }}</h2>
			<button  v-on:click="btnClick">按钮</button>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:'#app',			//这一行很重要！！！
				data:{
					message:'你好啊，前端人',
					isActive:true,
					isLine:true
				},
				methods:{
					btnClick:function(){
						this.isActive = !this.isActive
					}
				}
			})
		</script>
	</body>
</html>

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind</title>
		<style type="text/css">
			.active{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2 :style="{fontSize:finalSize + 'px',backgroundColor:finalColor}">{{message}}</h2>
			<h2 :style="getStyles()">{{message}}</h2>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					message:"你好啊，前端人",
					finalColor:'red',
					finalSize:100
				},
				methods:{
					getStyles:function(){
						return{fontSize:this.finalSize + 'px',backgroundColor:this.finalColor}
					}
				}
			})
		</script>
		</script>
	</body>
</html>

朱振玉小迷弟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态绑定class的对象语法

源码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>v-bind</title> <style type="text/css"> .active{ color: aqua; } </style> </head> <body> <div id="app">
复制链接

扫一扫