index.html
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--vue-app是根容器-->
<div id="vue-app">
<h1>动态 CSS Class</h1>
<h2>实例 1</h2>
<!--<div v-on:click="changeColor=!changeColor" v-bind:class="{changeColor:changeColor}">-->
<!--<span>Henry</span>-->
<!--</div>-->
<h2>实例 2</h2>
<button v-on:click="changeColor=!changeColor">change color</button>
<button v-on:click="changeLength=!changeLength">change length</button>
<div v-bind:class="compClasses">
<span>Henry</span>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
new Vue({
el:"#vue-app",
data:{
changeColor:false,
changeLength:false
},
methods:{
},
computed:{
compClasses:function () {
return {
changeColor:this.changeColor,
changeLength: this.changeLength
}
}
}
});
style.css
span{
background: red;
display: inline-block;
padding:10px;
color:#fff;
margin: 10px 0;
}
.changeColor span{
background:green;
}
.changeLength span:after{
content:"length";
margin-left: 10px;
}