vue.js默认收货地址选择代码

来源:https://www.sucaihuo.com/js/4939.html 2019-11-15 11:40浏览(80) 收藏

基于vue.js实现的默认收货地址选择代码,电商平台比较常用的一个地址选择功能。注:本地预览需服务环境,如localhost。
vue.js默认收货地址选择代码
分类:其它特效 难易:初级
查看演示 下载资源: 3 下载资源 下载积分: 20 积分

js代码

<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>

<script>
    //地址管理
    const vueAddress = new Vue({
        el: '#vue-address',
        data(){
            return{
                addressList: [], //地址列表
            }
        },
        created(){
            this.getAddressJson();
        },
        methods:{
            //获取地址列表数据
            getAddressJson(){
                let url = 'js/addressTest.json';
                axios.get(url)
                    .then(response =>{
                        this.addressList = response.data.list;
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },

            //设置默认地址
            setDefault(i){
                const addressList = this.addressList;
                addressList.forEach((item, index) => {
                    item.isDefault = index == i;
                });
                addressList.splice(0, 0, ...addressList.splice(i, 1));
            }

        }
    });
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

1 2