
<!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封装了部分数组相关功能的拦截
动态改变行内样式style
vm.styleobj.backgroundColor=’blue’
新增属性同样需要使用set方法解决拦截问题
Vue.set(vm.styleobj,’fontSize’,’24px’)
styleobj的css属性需要改成小驼峰写法
数组写法动态绑定行内样式style,可以直接push一个对象到数组中来新增属性
vm.stylearr.push({fontSize:’30px’})
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
喜欢就支持一下吧
请登录后发表评论
注册