示例代码:
<template>
<div id="home">
<p class="classObject" v-bind:class="classObject"></p>
<p class="classArray" v-bind:class="[{active: isActive}, {common: isCommon}]"></p>
<p class="classArray" v-bind:class="[activeString, commonString]"></p>
<p class="classArray" v-bind:class="[classObject, commonString]"></p>
</div>
</template>
<script>
export default {
data() {
return {
activeString: "activeString",
commonString: "commonString",
isActive: true,
isCommon: true,
button_type: "button_type_2",
list_type: "list_type_2"
}
},
computed: {
classObject: function () {
return {
show: this.isActive && this.isCommon,
button_type_2: this.button_type == "button_type_2",
list_type_2: this.list_type == "list_type_2" && this.isActive
}
}
}
}
</script>
<style lang="less">
</style>
表现: