<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用object与array控制class</title>
<script src="vue.js"></script>
</head>
<body>
<style>
.green{color: green}
.color{
color: red;
}
.font{font-size: 50px;}
</style>
<div id="lantian">
<h1 :class="lt">
科技中国
</h1>
<hr>
<h1 class="green" :class="{color:false}">
科技中国
</h1>
<hr>
<h2 :class="['color','font']">www.baidu.com</h2>
<hr>
<h2 :class="[success,font]">www.baidu.com</h2>
</div>
<script>
var app = new Vue({
el: '#lantian',
data: {
lt:{color:true,font:true},
success:'color',
font:'font'
}
});
</script>
</body>
</html>
