摘要：
我们可以看到所有的地址都是点亮的状态，就是外面都有个橙色的框。我们需要把默认地址，才设置为点亮的状态。1、新建变量checkedIndex，默认为0，然后把遍历地址列表，把字段isDefault为true的地址索引赋值给checkedIndexdata(){return{checkedIndex:0,//默认选中的索引}},methods:{getAddress(){this.axios.get.then},}2、修改循环代码：也可以写为：此时效果图：3、添加点击事件：把当前索引赋值给checkedIndex。
我们可以看到所有的地址都是点亮的状态，就是外面都有个橙色的框。我们需要把默认地址，才设置为点亮的状态。
1、新建变量checkedIndex，默认为 0，然后把遍历地址列表，把字段isDefault为true的地址索引赋值给checkedIndex
data() { return{ checkedIndex: 0, //默认选中的索引 } }, methods: { getAddress() { this.axios.get('/mock/address.json').then(res =>{ console.log(res) this.addrList =res.data.data this.addrList.forEach((item, index) =>{ if(item.isDefault) { this.checkedIndex =index } }) }) }, }
2、修改循环代码：
<li :class="{ check: item.isDefault }"v-for="item in addrFilter":key="item.addressId">
也可以写为：
<li :class="{ check: checkedIndex == index }"v-for="(item, index) in addrFilter":key="item.addressId">
此时效果图：
3、添加点击事件：
<li :class="{ check: checkedIndex == index }"v-for="(item, index) in addrFilter":key="item.addressId"@click="checkedIndex = index">
把当前索引赋值给checkedIndex。
点击第一个地址后的效果图：
4、给设为默认添加点击事件：
<a href="javascript:;"class="addr-set-default-btn"@click="slectDefault(index)"> <i>设为默认</i> </a> <script>export default{ methods: { //设为默认 slectDefault(index) { console.log(index) this.addrList.map((item, i) =>{ if(index ==i) { item.isDefault = true} else{ item.isDefault = false} }) } } } </script>
当前点击的索引和遍历中的索引一致时，设为true ，其他都设置为false。
也可以点击时传递addressId，效果都是一样的：
<a href="javascript:;"class="addr-set-default-btn"@click="slectDefault(item.addressId)"> <i>设为默认</i> </a> <script>export default{ methods: { //设为默认 slectDefault(id) { console.log(id) this.addrList.map(item =>{ if(id ==item.addressId) { item.isDefault = true} else{ item.isDefault = false} }) } } } </script>
切换后的效果图：
