场景：充值之后生成的充值记录列表，点击任一条充值记录，进入到当前点击项的交易明细页面。
目录
1. 在充值记录页面调接口拿数据
2. v-for 遍历渲染数据，给li标签@click绑定点击事件
3. 通过item获取当前点击项的所有属性值
4. 在充值明细页面使用通过路由传来的参数值
5. 案例页面展示
1. 在充值记录页面调接口拿数据
通过后端提供的接口获取数据，拿到的是数组对象格式
async getAllRecord () {
try {
const { data } = await record() // record是接口名
this.list = data // 把拿到的数据存到自己定义的数组内
if (this.list.length) {
this.loading = false; // vant的方法，加载状态结束
}
this.finished = true;
console.log(this.list);
} catch (err) {
this.$toast('获取充值记录失败')
}
编辑
2. v-for 遍历渲染数据，给li标签@click绑定点击事件
<li
v-for="item in list" // list是在data里定义好的数组
:key="item.name" // ke值随便写
@click="getItem(item)" // 在li标签绑定点击事件，这样每一项都可以单独触发
>
3. 通过item获取当前点击项的所有属性值
当点击任意一项时返回当前点击的这一项的所有数据。并在其他页面展示当前项数据
getItem (item) {
console.log(item); // 返回当前点击的item项
this.$router.push({ // 通过路由把需要的值传到其他页面使用
name: 'jiaoyimingxi',
query: {
money: item.money,
time: item.time,
}
})
},
4. 在充值明细页面使用通过路由传来的参数值
money: this.$route.query.paymoney, // 充值金额
time: this.$route.query.addtime, // 充值时间
5. 案例页面展示
编辑
