vue中class与style的绑定

最新推荐文章于 2023-09-27 22:09:36 发布

一只桃子~

最新推荐文章于 2023-09-27 22:09:36 发布

阅读量109

点赞数 1

本文链接：https://blog.csdn.net/qq_43405603/article/details/119844392

版权

本文介绍了如何在HTML中使用Vue.js结合CSS实现动态样式，包括v-bind:class绑定类名和:style指令的应用，以及isActive、isGreen状态的控制。展示了如何根据数据变化实时更新元素样式。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<div 
	class="test" 
	v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']" 
	style="width:200px; height:200px; text-align:center; line-height:200px;">
		hi vue
	</div>
	
	<div 
	:style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">
		hi vue
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		isActive : true,
		isGreen : true,
		color : "#FFFFFF",
		size : '50px',
		isRed : true
	}
});
</script>
<style>
.test{font-size:30px;}
.green{color:#00FF00;}
.active{background:#FF0000;}
</style>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一只桃子~

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中class与style的绑定

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"> <div class="te.
复制链接

扫一扫