<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
line-height: 200px;
background-color: burlywood;
margin: 0 auto;
text-align: center;
}
.red{
color:red;
}
.font{
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<!-- 属性也可以为对象名 -->
<p :class="classObject">hello Vue</p>
</div>
<script>
var vm=new Vue(
{
el:"#app",
data:{
classObject:{
red:true,
font:true,
}
}
}
);
</script>
</body>
</html>
