- 包含vue过滤
- 采用sort API排序,可直接使用
<template>
<div class="home">
<button @click="gopage">go router 2</button>
<div v-for="item of a.renewalNewInsuredInfoDTOS" :key="item.insuredOrder" style="border:1px solid blue;margin: 10px auto ;">
<div class="item" >
<p>第{{item.insuredOrder | filterNum}}个信息</p>
<p>{{item.insuredOrder}}</p>
<p>{{item.name}}</p>
<p>{{item.birthdate}}</p>
</div>
<div>
<p>第{{item.insuredOrder | filterNum}}个信息</p>
<div v-for="(bitme, i ) of item.beneficiaryInfoDTOS" :key="i*(Math.random()*10)" >
<p>{{bitme.insuredOrder}}</p>
<p>{{bitme.name}}</p>
<p>{{bitme.birthdate}}</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "HomeView",
components: {},
filters:{
filterNum(val){
if(val=='1'){
return '一'
}else if(val =='2'){
return '二'
}
}
},
data() {
return {
a: {
renewalNewInsuredInfoDTOS: [
{
insuredOrder: "1",
holderRelation: "01",
name: "撤出单1",
age: "35",
gender: "0",
birthdate: "1987-01-01",
beneficiaryInfoDTOS: [
{
name: "张三",
age: "12",
holderRelation: "0",
gender: "1",
birthdate: "2022-10-11",
}, {
name: "莉萨时尚",
age: "90",
holderRelation: "0",
gender: "1",
birthdate: "2012-4-11",
},
],
},
{
insuredOrder: "2",
holderRelation: "0",
name: "撤出单2",
age: "15",
gender: "1",
birthdate: "1997-01-01",
beneficiaryInfoDTOS: [
{
name: "张啊",
age: "90",
holderRelation: "0",
gender: "1",
birthdate: "1982-10-11",
},
],
},
],
isShow: "",
},
};
},
mounted() {
this.gopage()
},
methods: {
gopage() {
this.a.renewalNewInsuredInfoDTOS.sort((a,b)=>{
return a.insuredOrder > b.insuredOrder ? 1 : -1;
});
},
},
watch: {},
};
</script>