<template><!--作者：luoyiming时间：2019-10-24描述：后台系统内容区域--><div class="right-content pr"><!--头部--><Head></Head><!--内容区域--><div class="right-content-box"><div class="subject-wrap" :style="{ backgroundColor: bgColor }" <!-- 直接使用计算属性名 -->><router-view /></div></div></div>
</template><script>import Head from '@/views/layout/Head.vue';export default {components: {Head},computed: {bgColor() { // 计算属性定义为函数，但在模板中作为属性使用const routeName = this.$route.name;const bgMap = {'home': '#ffffff','settings': '#f5f7fa','dashboard': '#e9ecef',};return bgMap[routeName] || '#ffffff';}}};
</script><style>
.subject-wrap {min-height: calc(100vh - 60px);
}
</style>
- 将模板中的
getBgColor() 改为 bgColor（计算属性作为普通属性使用） - 保留计算属性的函数定义方式（但调用时不需要括号）
- 将计算属性名从
getBgColor 改为 bgColor 以更符合 Vue 风格
