class和style的绑定

1class的绑定

对象写法

数组写法

<div :class="[activeClass,currentIndex]">style</div>

2.style的绑定

对象写法

<template>
<div :class="classdemo">sdfsfs
<div class="old" :class="{'text':actives,current:actives}">sdfsfs</div>
<div :class="classobj">xxxx</div>
<button type="button" @click="changecss">按钮</button>
<div :class="[activeClass,currentIndex]">style</div>
<div :class="[isActive?activeClass:'',currentIndex]">三目运算符</div>
<!-- 对象只能接受字符串，数组可以接受对象或者字符串拼接-->
<div :class="[isActive?activeClass:currentIndex1,currents,classdemo]">active1 current active</div>
<p :style="{color:'red',fontSize:'20px',backgroundColor:'blue'}">对象</p>
<p :style="{color:colors,fontSize:'20px',backgroundColor:'#f00'}">这是段落p</p>
</div>
</template>

<script>
export default {
name: "style1",
data() {
return {
classdemo: "active",
actives: true,
currents: "current",
classobj: {
"text1": true,
"text2": true
},
activeClass: "active1",
currentIndex: "currents",
currentIndex1: "curr",
isActive: true,
colors:"yellow"
}
},
methods: {
changecss() {
this.classobj = {
"text1": true,
"text2": false
}
}
}
}
</script>
<style scoped>
.active1 {
color: red;
}
.currents {
color: blue;
}
</style>