Vue基础--class与style绑定

最新推荐文章于 2024-06-13 15:01:17 发布

长耳朵的鱼鱼

最新推荐文章于 2024-06-13 15:01:17 发布

阅读量93

点赞数

分类专栏： Vue学习笔记

本文链接：https://blog.csdn.net/weixin_43847545/article/details/105500063

版权

Vue学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>class与style绑定</title>
		<script src="../js/vue.js"></script>
		<style>
			.classA{
				color: red;
			}
			.classB{
				color: green;
			}
			.classC{
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div id="demo">
			<h2>class绑定 class='xxx'</h2>
			<p :class='a'>xxx是字符串</p>
			<p :class='{classA:IsA,classB:IsB}'>xxx是对象</p>
			<p :class='["classA","classC"]'>xxx是数组</p>
			<button @click="update">update</button>
			<h2>style绑定 style='{color:fontcolor,fontSize:fontsize}'</h2><!-- fontcolor需要定义在data中-->
			<p :style="{color:fontcolor,fontSize:fontsize}">style='{color:fontcolor,fontSize:fontsize}'</p>
		</div>
	</body>
	<script>
		new Vue({
			el:'#demo',
			data:{
				a:'classA',
				IsA:true,
				IsB:false,
				fontcolor:'blue',
				fontsize:'30px'
			},
			methods:{
				update(){
					this.a="classB"
					this.IsA=!this.IsA
					this.IsB=!this.IsB
				}
			}
		})
	</script>
</html>