css-根据不同后端返回值返回渲染不同的div样式以及公共组件设定

1.动态绑定

        Vue: 使用计算属性 getClassName 来动态计算样式类名，并通过 :class 绑定到 div 元素上。

<template><div :class="getClassName">这是一个根据后端值动态设置样式的 div 元素。</div>
</template><script>
export default {props: {backendValue: {type: String,required: true}},computed: {getClassName() {switch (this.backendValue) {case 'success':return 'success-class';case 'warning':return 'warning-class';case 'error':return 'error-class';default:return 'default-class';}}}
};
</script>

2.父子组件公共状态

2.1枚举值

var EnumUtil = {}// 状态值
EnumUtil.State = { 'DELAY': 1, 'WARN': 2, 'NORMAL': 3, };export default EnumUtil;

 2.2公共组件

<template><div v-html="getStateHtml(State)"></div>
</template><script>// 枚举值import EnumUtil from "@/views/modules/js/EnumUtil";export default {name: "StateComponent",props: ['State'],methods: {// 状态值getStateHtml(state) {if (EnumUtil.State.DELAY === state) {return '<div class="StatetBall1"></div>'} else if (EnumUtil.State.WARN === state) {return '<div class="StatetBall2"></div>'} else if (EnumUtil.State.NORMAL === state) {return '<div class="StatetBall3"></div>'} else {return '<div></div>'}},}}
</script><style >.StatetBall1,.StatetBall2,.StatetBall3 {width: 14px;height: 14px;border-radius: 50%;margin: 0 auto;}.StatetBall1 {background: rgb(149, 18, 189);}.StatetBall2 {background: rgb(182, 160, 132);}.StatetBall3 {background: rgb(44, 47, 196);}
</style>

2.3父组件引用 

 
<StateComponent :State="dataState"></StateComponent>import组件引入components声明dataState后端返回状态值