vue style 绑定多个class完成需求
(动画编辑器项目)用 json 形式 绑定多个 Class 名该方法方便用于当同时添加多个 Class 名时,在某种情况下判断显示哪种样式先写好样式<style>.yellow{width: 200px;height: 200px;background: #ff0;}.shadow{box-shadow: 10px 10px 5px 0 ...
·
(动画编辑器项目)
用 json 形式 绑定多个 Class 名
该方法方便用于当同时添加多个 Class 名时,在某种情况下判断显示哪种样式
先写好样式
<style>
.yellow{
width: 200px;
height: 200px;
background: #ff0;
}
.shadow{
box-shadow: 10px 10px 5px 0 #999;
}
</style>
在 data
中添加数字对象,用来做判断
<script>
export default {
name: 'app',
data () {
return {
show1:true,
show2:false
}
}
}
</script>
以 json
的形式绑定到 class
中,通过布尔值改变 show1
与 show2
的值,来控制 div
的状态
<template>
<div id="app">
<div :class="{yellow:show1,shadow:show2}"></div>
</div>
</template>
更多推荐
已为社区贡献8条内容
所有评论(0)