- vue中列表循环,其中某字段需要转意。
- 因为该字段对应值不止两个,所以无法使用三元运算符。
- 也没有使用组件嵌套,所以需要在一个页面完成数据查询和处理两个步骤。
经过尝试得知
- vue中computed计算属性无法直接进行传参,在计算属性中接受数据,打印出来的是vue实例
- 可以使用闭包函数(匿名函数)实现传参
【未解决】为什么switch不生效
<template>
<div>
<div class="reportItem" v-for="item in data" v-bind:key="item.IDNo">
<ul>
<li class="item row_left">
<div class="title">证件类型</div>
<div class="cont" v-text="showIDType(item.IDType)"></div>
</li>
</ul>
</div>
</div>
</template>
export default {
data() {
return {
data: [
{
userName: '张三',
telephone: '16600001111',
IDNo: '123456199001019988',
IDType: '1'
},
{
userName: '李四',
telephone: '18811110000',
IDNo: '123456199001019980',
IDType: '2'
},
{
userName: '王五',
telephone: '17711110000',
IDNo: '123456199001019980',
IDType: '3'
}
]
}
},
showIDType() {
return function(type) {
console.log(typeof type, type)
if (type === '1') {
console.log('身份证')
return '身份证'
} else if (type === '2') {
return '军官证'
} else if (type === '3') {
return '护照'
}
// switch (type) {
// case 1:
// console.log('身份证')
// return '身份证'
// case 2:
// return '军官证'
// case 3:
// return '护照'
// }
}
}
}