<!-- Vue--动态绑定CSS样式 -->
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style6.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="vue-app">
<h1> 动态CSS Class </h1>
<!-- <h2 >实例1</h2>
<div v-on:click="changColor =!changColor" v-bind:class="{changColor:changColor}"><span>harry</span>
</div >-->
<h2>实例2</h2>
<button v-on:click="changColor = !changColor">change color</button>
<button v-on:click="changLength = !changLength">change length</button>
<div v-bind:class="compClasses"><!--计算属性-->
<span>aaa</span>
</div>
</div>
<script src="app6.js"></script>
</body>
</html>
js
new Vue({
el:"#vue-app",
data:{
changColor:false,
changLength:false,
},
methods:{
},
computed:{
compClasses:function(){
return {
changColor:this.changColor,
changLength:this.changLength,
}
}
}
});
css:
span{
background: red;
display: inline-block;
padding: 10px;
color: blue;
margin:10px 0;
}
.changColor span{
background: yellow;
}
.changLength span:after{
content: "ccc";
margin-left: 10px;
}
网友评论