在vue官方文档里学到的,动态切换class绑定style的三种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.demo1_a {
background-color: black;
}
.demo1_b {
background-color: pink;
}
.demo2_a {
background-color: red;
}
.demo2_b {
background-color: green;
}
.demo3_a {
background-color: blue;
}
.demo3_b {
background-color: yellow;
}
</style>
</head>
<body>
<!-- 动态切换class -->
<!-- 表示这个class是否存在取决于数据属性(isA/isB)的true -->
<!-- 写法一 -->
<div id="demo1">
<div
class="static"
v-bind:class="{'demo1_a' : isA,'demo2_b' : isB}">demo1
</div>
</div>
<!-- 写法二 (不必内联定义在模块中)-->
<div id="demo2">
<div v-bind:class="classObject">demo2</div>
</div>
<!-- 写法三 (computed属性) -->
<div id="demo3">
<div v-bind:class="classObject">demo3</div>
</div>
<script>
var vm = new Vue({
el:'#demo1',
data:{
isA:false,
isB:true
}
})
var vm = new Vue({
el:'#demo2',
data:{
classObject: {
'demo2_a':true,
'demo2_b':false
}
}
})
var vm = new Vue({
el:'#demo3',
data() {//与上边data写法不同 可以替换
return {
'isA':false,
'isB':true
}
},
computed:{
classObject: function() {
return {
'demo3_a': this.isA,
'demo3_b': this.isB
}
}
}
})
</script>
</body>
</html>
```js