一、class绑定属性
:class = "{imgsize: isActive}
- 其中imgsize为class属性名，当isActive的值为true的时候执行class属性名为imgsize的css样式
- :class = “[‘active’, ‘sze’]” 还可以同时为标签绑定多个class属性
<style type="text/css">
.active{
color: red;
}
.imgsize{
width: 400px;
height: 1200px;
}
</style>
<script src="vue.js"></script>
<script>
window.onload = function(){
let vm;
vm = new Vue({
el: '#app',
data: {
isActive: true,
imgUrl: '..\\img\\_510735865_mmexport1579333094865_1579333094000_xg.jpg',
},
methods: {
btnClick() {
this.isActive = !this.isActive;
},
},
});
}
</script>
<body>
<div id="app">
<div :class = "{active:isActive}">字体变化 </div>
<div :class = "['active', 'sze']">我是数组 </div>
<button @click="btnClick">改变class</button>
<div>
<img :src="imgUrl" :class = "{imgsize: isActive}">
</div>
</div>
</body>
二、class绑定对象
