<template>
<div>
<p v-bind:class="{active:isActive,'demo':Demo}">嘿嘿</p>
<p v-bind:class="styleObj">哈哈</p>
<p v-bind:class="styleObj2">咯吱咯吱</p>
<p v-bind:class="[active1]">呵呵</p>
<p v-bind:class="[{active:isActive},'info-'+id]">呵呵2</p>
<div>
<ul>
<li :class="[{active:index%2==0},'info-'+id]" v-for="(name,index) in names">{{name}}</li>
</ul>
</div>
<div>
<p :style="stob">你来了</p>
</div>
</div>
</template>
<script>
export default {
name: 'styles',
data() {
return {
isActive: true,
Demo: true,
styleObj:{
active:true,
'demo':false
},
active1:'active',
id:10,
names:['小明','小红','小军'],
stob :{
color:'red',
fontSize:'30px'
}
}
},
methods: {
},
computed:{
styleObj2(){
return{
'active':this.isActive,
'demo':this.Demo
}
}
}
}
</script>
<style>
.active {
color: darkgreen;
}
</style>