技巧6 vue/js地址列表中默认地址的做法|如何将指定索引项设为默认

luanmabug

于 2022-01-27 02:46:43 发布

阅读量2.1k

点赞数 1

分类专栏： # vue3项目技巧文章标签： javascript 前端 vue 默认地址指定索引设为默认

本文链接：https://blog.youkuaiyun.com/yangyangdt/article/details/122711493

版权

本文介绍在Vue.js应用中处理地址列表的默认地址功能。需求包括：确保设置默认地址后，之前默认地址不再显示；默认地址始终位于列表首位。实现步骤包括：更新地址对象以包含`isDefault`标识；通过点击事件触发`setDefault`函数，根据索引设置`isDefault`值，并将默认地址移动到列表首位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

在地址列表中，通常会设置一个默认地址。

1.我们要保证设置地址1为默认地址后，再设置地址2为默认地址，地址1的默认要去掉。

2.默认地址要处于列表首位。

效果图：布局是element-plus

步骤：

add_address是每个地址对象，address_list是地址列表。

1.首先默认地址和设为默认不能在一个地址里同时出现，所以用v-if和v-else控制只显示一个。

<el-button>
    <em class="Default" v-if="item.isDefault">默认地址</em>
	<em  v-else @click="setDefault(index)">设为默认</em>	
</el-button>

2.要给默认地址一个标识符在地址对象里，在data的add_address里添加isDefault，初始值为空。并把它绑定在默认地址按钮。因为是值是空，所以不显示，显示v-else

3.点击设为默认，触发设置默认地址的函数 setDefault（index）,给这个函数传索引参数。

4.setDefault函数内部遍历地址数组，找到该索引下的地址对象，把它的isDefault设置为索引值。

遍历结束后，把设为默认地址的对象移到列表首位，方法就是先删除此对象，再在首位添加。

this.address_list.splice(0, 0,

最低0.47元/天解锁文章