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>更多推荐



所有评论(0)