class的绑定

最新推荐文章于 2024-08-30 00:10:04 发布

碧山云游

最新推荐文章于 2024-08-30 00:10:04 发布

阅读量270

点赞数

分类专栏： Vue.js学习笔记

本文链接：https://blog.csdn.net/qq_41617901/article/details/116464285

版权

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

21 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Vue的基本使用</title>
	<style type="text/css">
		.active{
			width: 100px;
			height: 100px;
			background-color: cadetblue;
			margin-bottom: 10px;
		}
		.error{
			font-size: 30px;
		}
	</style>
</head>
<body>
	
	<div id="box">
		<!-- 原本的方式：写死的 -->
		<div class="active"></div>
		<!-- [1] 对象语法处理方式,单个类名切换，类名：active，是否显示isActive ，此种方式可以动态让样式显示或隐藏-->
		<div v-bind:class="{active:isActive}"></div>
		<!-- [2]对象语法处理方式，多类名切换-->
		<div v-bind:class="{active:isActive,error:isError}">多样式切换测试</div>
		
		<button v-on:click="handle_1">对象形式的样式切换</button>
		<!-- [3] 数组形式的处理方式-->
		<div v-bind:class="[activeClass,errorClass]">数组形式处理样式</div>
		<button v-on:click="handle_2">数组形式的样式切换</button>
	</div>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		new Vue({
			el:'#box',
			data:{
				isActive:true,
				isError:true,
				activeClass:'active',
				errorClass:'error'
			},
			methods:{
				handle_1:function(){
					//控制isActive的值在true和false之间进行切换
					this.isActive=!this.isActive;
					this.isError=!this.isError;
				},
				handle_2:function(){
					this.activeClass='';
					this.errorClass='';
				}
			}
		})
	</script>
</body>
</html>