05-动态切换class&style-十八叔

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="lib/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<div :class="classobj">动态切换class-1-对象</div>
			<div :class="classarr">动态切换class-2-数组</div>
			
			<div :style="styleobj">动态切换style-1-对象</div>
			<div :style="stylearr">动态切换style-2-数组</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#box",
				data:{
					classobj:{
						aa:true,
						bb:true,
						cc:false
					},
					classarr:['aa','bb'],
					styleobj:{
						backgroundColor:'red'
					},
					stylearr:[{backgroundColor:'yellow'}]
				}
			})
			
			// vue2  解决方案： Vue.set(对象,属性,值)
			//vue3 支持动态增加属性的拦截
		</script>
	</body>
</html>

通过:class绑定一个对象classobj,或者一个数组classarr，通过改变classobj和classarr的值来实现动态绑定class.

在控制台中改变属性值查看效果：

vm.classobj.aa=false

对应的div上的class就没有了aa

vue2不能拦截对象里新增的属性

vm.calssobj.ee=true

div里不会绑定ee，需要使用Vue.set(对象,属性,值)来设置新增属性

Vue.set(vm.classobj,’dd’,true)

通过数据动态绑定class

vm.classarr.push(‘ccc’)

vue2封装了部分数组相关功能的拦截

02-vue模板语法-十八叔 (18shu.cn)