<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态绑定类名</title>
<link rel="stylesheet" type="text/css" href="vue.css">
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue-app">
<h1>动态 CSS CLASS </h1>
<h2> 示例 1</h2>
<div v-bind:class="{changeColor:changeColor}">
<span>你妹的</span>
</div>
<!--这里绑定单击事件 相当于 给自己取反--->
<div v-on:click="changeColor=!changeColor" v-bind:class="{changeColor:changeColor}">
<span>你妹的</span>
</div>
<h2 v-bind:class="{red:false}">示例 2 false 静态更改 样式</h2>
<h2 v-bind:class="{red:true}">示例 2 true，查看样式注意有什么不同之处</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>大哥哥</span>
</div>
</div>
<script src="app.js"></script>
</body>
</html>类名动态绑定 HTML
new Vue({
el:'#vue-app',
data:{
changeColor:false,
changeLength:false
},
methods:{
},
computed:{
compClasses:function(){
return {
changeColor:this.changeColor,
changeLength:this.changeLength
}
}
}
})Vue.js
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;
}CSS