Vue能让class合并
- 使用:(v-bind)
- 使用绑定到class
绑定样式
<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
<meta charset="UTF-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="js/vue.js"></script>
<title>Title</title>
<style>
.a{
height: 80px;
width: 50px;
background-color: aqua;
}
.b{
background-color: rebeccapurple;
}
.c{
background-color: palegreen;
}
</style>
</head>
<body>
<div id="firstVue">
<h1>绑定class</h1>
//根据：class动态的绑定样式 v-bind将数据绑定到属性
<div class="a" :class="x" @click="changemod">{{firstname}}</div>
</div>
</body>
<script type="text/javascript">
//关闭生成提示
Vue.config.productionTip=false;
let v=new Vue({
el:"#firstVue",
data:{
firstname:"张",
x:"b"
},
methods:{
changemod(){
this.x="c"
}
}
})
console.log(v)
</script >
</html>