<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.page{
width:200px;
height:200px;
background: #FB7209;
}
.active{
width:250px;
height:250px;
background: skyblue;
}
.colorChange{
background: #6e757f;
}
</style>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<!-- <div class="page"></div>-->
<!-- 绑定class-->
<!-- 通过对象的方式决定是否存在某个类-->
<!-- active为true时，类active 存在,显示效果
false时，类active 的 使用会被删除-->
<div :class="{active:isTrue}"></div><hr>
<!-- 直接放置对象-->
<div class="page" :class="styleObj"></div>
<!-- 放置数组-->
<!-- 用数组存放样式-->
<div class="page" :class="styleArr"></div>
<!-- 放置字符串-->
<div class="page" :class="styleStr"></div>
<!-- 数组和对象混合使用-->
<div class="page" :class="styleArrObj"></div>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
isTrue:true,
//active的css需要放在page之后，才有效果？
styleObj:{active:true,colorChange:true},
//可直接用数组的方式进行添加删除样式
styleArr:['col-xs-12','red-bg'],
styleStr:'abc cba qwer',
styleArrObj:['abc',{active:false}]
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
