地址列表展开功能/默认选中功能

虽然简单,做下记录
方法一

<template>
  <div class="hello">
        <div style="width:100%;height: 280px;">
           <div class="address" id="getAdress">
                <div class="addressSigle" v-for="(item,index) in allResponseList" :key="index" v-if="index<=listLength">
                    <div class="addressLeft">
                        <div>{{item.name}}</div> 
                        <div>{{item.address}}</div>  
                        <div>{{item.tel}}</div>
                        <div v-if="item.isDefault" style="color:red">默认地址</div>
                    </div>
                    <div class="addressRight">
                          <div>
                            <img src="./write.png" alt="">
                          </div>
                          <div>
                            <img src="./delete.png" alt="">
                          </div>
                    </div>
                </div>
                <div class="addressSigle" style="height: 78px;text-align: center;line-height: 78px;padding-left: 100px;width:200px;    height: 78px; text-align: center;line-height: 78px;
        padding-left: 150px; width: 150px;" >        
                  +添加新地址
                </div>    
          </div>
       </div>
       <div style="magrin-top:200px" @click="moreAddress()">more+</div>
  </div>
</template>
<script>
import router from '../router/index.js'
export default {
  data () {
    return {
      allResponseList:[
            {
                id: 1,
                name: "换",
                address: "guangzhou",
                postCode: 10086,
                tel: 18819164277,
                isDefault: true
            } ,
              {
                id: 2,
                name: "换",
                address: "guangzhou",
                postCode: 10086,
                tel: 18819164277,
                isDefault: false
            },
            {
                id: 3,
                name: "换",
                address: "guangzhou",
                postCode: 10086,
                tel: 18819164277,
                isDefault: false
            },
            {
                id: 4,
                name: "换",
                address: "guangzhou",
                postCode: 10086,
                tel: 18819164277,
                isDefault: false
            },
            {
               id: 5,
                name: "换",
                address: "guangzhou",
                postCode: 10086,
                tel: 18819164277,
                isDefault: false
            },
            {
                id: 6,
                name: "换",
                address: "guangzhou",
                postCode: 10086,
                tel: 18819164277,
                isDefault: false
            },
            {
                id: 7,
                name: "换",
                address: "guangzhou",
                postCode: 10086,
                tel: 18819164277,
                isDefault: false
            },
            {
                id: 8,
                name: "换",
                address: "guangzhou",
                postCode: 10086,
                tel: 18819164277,
                isDefault: false
            },
             {
                id: 9,
                name: "换",
                address: "guangzhou",
                postCode: 10086,
                tel: 18819164277,
                isDefault: false
            },
             {
                id: 10,
                name: "换",
                address: "guangzhou",
                postCode: 10086,
                tel: 18819164277,
                isDefault: false
            },
             {
                id: 11,
                name: "换",
                address: "guangzhou",
                postCode: 10086,
                tel: 18819164277,
                isDefault: false
            },
             {
                id: 12,
                name: "换",
                address: "guangzhou",
                postCode: 10086,
                tel: 18819164277,
                isDefault: false
            },
             {
                id: 13,
                name: "换",
                address: "guangzhou",
                postCode: 10086,
                tel: 18819164277,
                isDefault: false
            }
      ],
      listLength:4,  //这里是控制初始化数据是多少,不能超过这个数
    }
  },
  methods:{
    moreAddress:function (){
        this.listLength=this.allResponseList.length //点击之后就让展开数等于所有的
    },
    defalutAddress:function (index) {  //点击哪个,先将所有的去掉默认,再看点击那个就将默认加上去
       this.allResponseList.forEach((ele)=>{
         ele.isDefault=false
       })
       this.allResponseList[index].isDefault=true
    }
  }
}
</script>

<style scoped>
.addressSigle{
  display:flex;
  float: left;
  margin-left:10px;
  margin-top:10px;
}
.addressLeft{
  flex:1;
}
.addressRight{
  flex:4;
}
.addressSigle{
  width:300px;
  border:1px solid black;
}
.addressSigle:hover{
  border:1px solid red;
}
</style>

嗯，就这样吧