先看一下要实现的效果
view代码
<view v-for="(item,index) in list" :key="index">
<view :style="{color:getColor(item.type)}">
{{getBetRel(item.type)}}
</view>
</view>
js
// new Map()
const metaType = {
'0': '等待吃饭',
'1': '不吃饭',
'2': '吃过了',
'3': '还没开始吃'
}
const metColor = {
'0': '#000',
'1': 'green',
'2': '#f2534b',
'3': ' #808c9f'
}
export default {
data() {
return {
list:[{
type:0,
},{
type:1,
},{
type:2,
},{
type:3
}]
}
},
methods: {
getBetRel(bType) {
return metaType[bType]
},
getColor(bType){
return metColor[bType]
},
},
}
到时候只需要根据后端传过来的值替换一下就可以了。
new map是一种语法,是ES6的一种新的数据结构，它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。
