vue样式绑定

最新推荐文章于 2023-05-10 21:47:04 发布

六点路人

最新推荐文章于 2023-05-10 21:47:04 发布

阅读量245

点赞数

分类专栏： vue基础文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_41675013/article/details/105572745

版权

本文介绍了Vue中两种样式绑定的方法：一是使用class对象绑定，二是利用class数组绑定，详细解析了这两种方式在Vue应用中的实现和应用场景。

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

vue样式绑定

第一种：class对象绑定

<style>
	.activated {color:red}
</style>
<div id="root">
	<div :class="{activated: isActivated}"
			@click="handleDivClick"
	>
		{
  {message}}
	</div>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el:"#root",
		data:{
			message: 'Hello World',
			isActivated: false
		},
		methods:{
			handleDivClick: function() {
				this.isActivated = !this.isActivated

			}
		}
	})
</script>

第二种：class数组绑定


```javascript
<div id="root">
		<div :class="[activated,activatedOne]"
				@click="handleDivClick"
		>
			{
  {message}}
		</div>
	</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#root",
			data:{
				message: 'H