1.动态创建class的对象方法
第一在样式表中添加对应类名的样式
<body>
<div id="box">
<div :class="classobj">动态创建class----对象写法</div>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
classobj:{
a:true,
b:true,
c:true
}
}
})
//拦截，如果后期还要添加可以使用set拦截
Vue.set(vm.classobj,"d",true)
</script>
</body>
2.动态创建class的数组写法
<body>
<div id="box">
<div :class="classarr">动态创建class----数组写法</div>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
classarr:["aa","bb","cc"]
}
})
//如果后期要添加使用push，要删除使用splice即可
vm.classarr.push( dd )
vm.classarr.splice(1,1)
</script>
</body>
3.动态创建style的对象写法
<body>
<div id="box">
<div :style="styleobj">动态切换style----对象写法</div>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
styleobj:{
backgroundColor: red
},
}
})
//style的对象写法,也可以添加其他的样式，例如fontSize等
Vue.set(vm.styleobj, backgroundColor ,"yellow")
</script>
</body>
4.动态创建style的数组写法
<body>
<div id="box">
<div :style="stylearr">动态切换style----对象写法</div>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
stylearr:[
{background:"red"}
]
}
})
//如果后期要添加使用push，要删除使用pop即可
vm.stylearr.push({fontSize:"10px"})
vm.stylearr.pop()
</script>
</body>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
