1、截图

2、address.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta charset="utf-8">

    <!-- Always force latest IE rendering engine or request Chrome Frame -->

    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <title>Checkout - Confirm Address</title>

    <link href="css/base2.css" rel="stylesheet" >

    <link href="css/checkout.css" rel="stylesheet" >

</head>

<body class="checkout">

    <div class="container">

            <div class="addr-list-wrap">

                <div class="addr-list">

                    <ul>

                        <li v-for="(item,index) in filterAddress" v-bind:class="{'check':index==currentIndex}" @click="currentIndex=index">

                            <div class="addr-opration addr-set-default">

                                <a href="javascript:;" class="addr-set-default-btn"  v-if="!item.isDefault" @click="setDefault(item.addressId);"><i>设为默认</i></a>

                            </div>

                            <div class="addr-opration addr-default" v-if="item.isDefault">默认地址</div>

                        </li>

            <!-- shipping method-->

            <div class="checkout-title">

                <span>配送方式</span>

            </div>

            <div class="shipping-method-wrap">

                <div class="shipping-method">

                    <ul>

                        <li  :class="{'check':shippingMethod==1}" @click="shippingMethod=1">

                            <!--注意绑定是{}和‘’-->

                            <div class="name" >标准配送</div>

                            <div class="price">Free</div>

                        </li>

                        <li :class="{'check':shippingMethod==2}"  @click="shippingMethod=2">

                            <div class="name" >高级配送</div>

                            <div class="price">180</div>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

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

    <script src="js/lib/vue-resource.min.js"></script>

<script src="js/address.js"></script>

</body>

</html>

3、address.js

/**

 * Created by kk on 2017/4/20.

 */

new Vue({

    el:".container",

    data:{

        limitNum:3,

        addressList:[],

        currentIndex:0,

        shippingMethod:1

},

mounted:function () {

    this.$nextTick(function(){

       // alter();

        this.getAddressList();

    });

},

    computed:{

        filterAddress:function () {

            return this.addressList.slice(0,this.limitNum);

        //    方法和属性需要加this，不然会找不到

        }

    },

    methods:{

        setDefault:function (addressId) {

            this.addressList.forEach(function (address,index) {

                if(address.addressId==addressId)

                {

                    address.isDefault=true;

                }

                else{

                    address.isDefault=false;

                }

            })

        }

}

});

vue设置默认地址和配送方式的更多相关文章

  1. discuz首页设置默认地址不带forum.php后缀的方法

    最近在研究discuz,上传安装几部搞定,打开首页跳到含有"/forum.php"的网址,到管理中心改了好一会儿也没好.那么如何实现discuz首页设置不带forum.php后缀呢 ...

  2. myeclipse设置默认的jsp打开方式

  3. ecshop 订单-》设置默认收货地址，或者删除

    设置位置:ecs_users标的   country字段,默认是0,默认地址是 users_address 的address_id 设置默认收货地址 /** * 设置默认地址 * * @access ...

  4. Vue nodejs商城-地址模块

    一.地址列表渲染 ,则不可以点击. src/views/Cart.vue <a class="btn btn--red" v-bind:class="{'btn-- ...

  5. vue2购物车ch4-(筛选v-for 点击的那个设置样式 设为默认地址其他 联动 非循环的列表选中和非选中 删除当前选中的列表)

    1 address.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. Vue cli4 图片地址引入的几种方式

    五种图片地址引入方式 @开头,它也会作为一个模块请求被解析.它的用处在于Vue CLI默认会设置一个指向项目根目录/src的别名@

  7. 【转】Centos 设置IP地址的几种方式

    对于很多刚刚接触linux的朋友来说,如何设置linux系统的IP地址,作为第一步,下面小编以centos系统为例,给大家演示如何给centos设置IP地址,如何修改linux 系统IP地址? 查看I ...

  8. Eclipse Class Decompiler影响class默认打开方式，重新设置Eclipse默认源码打开方式

    安装Eclipse Class Decompiler插件后,Eclipse中的默认源码打开方式被修改为Eclipse Class Decompiler 这不是我喜欢的,因为我希望,源码从网络中获取,当 ...

  9. 【转载】win10解决设置默认打开方式不生效问题（双击每次都要选择默认打开程序）

    win10解决设置默认打开方式不生效问题(双击每次都要选择默认打开程序) 以下文章 部分选自 https://blog.csdn.net/shan165310175/article/details/8 ...

随机推荐

  1. django csrf_protect及浏览器同源策略

    1.django在检测post行为时会有诸多的限制. 为了防止跨域请求伪造安全 参考:http://www.qttc.net/201209211.html   https://www.cnblogs. ...

  2. poj 3525 半平面交求多边形内切圆最大半径【半平面交】+【二分】

    <题目链接> 题目大意:给出一个四面环海的凸多边形岛屿,求出这个岛屿中的点到海的最远距离. 解题分析: 仔细思考就会发现,其实题目其实就是让我们求该凸多边形内内切圆的最大半径是多少.但是, ...

  3. hdu 1686 Oulipo 【KMP】(计算模式串匹配的次数——与已匹配的字串可以有交集)

    题目链接:https://vjudge.net/contest/220679#problem/B 题目大意: 输入一个T,表示有T组测试数据: 每组测试数据包括一个字符串W,T,T长度大于W小于100 ...

  4. 在docker中运行mysql实例

    Docker是一种新兴的虚拟化技术,能够一定程度上的代替传统虚拟机.下图是容器跟虚拟机的对比 对docker有个大致了解,学习docker断断续续,虽说学习不能急于求成,但断断续续学的话,浪费的碎片化 ...

  5. 深入学习webpack

    webpack配置是标准的Node.js CommonJS模块,webpack中的绝对路径指"/src/css/file",相对路径指"../css/file" ...

  6. 8.10 正睿暑期集训营 Day7

    目录 2018.8.10 正睿暑期集训营 Day7 总结 A 花园(思路) B 归来(Tarjan 拓扑) C 机场(凸函数 点分治) 考试代码 A B C 2018.8.10 正睿暑期集训营 Day ...

  7. Python图形编程探索系列-09-tkinter与matplotlib结合案例

    案例1 案例来自于:https://bbs.csdn.net/topics/390326088 代码示例: import matplotlib matplotlib.use('TkAgg') from ...

  8. while 、函数、参数

    while 循环 一个循环语句 表示当某个条件成立时就循环 不知道具体循环次数,但能确定循环的成立条件的时候用while循环 while 条件表达式: 语句块 例1 :如果年利率为6.7%,本利是每年 ...

  9. CocosCreator核心概念里的基础点

    1,锚点:是节点位置的参照点,也是自身旋转,缩放的基准点,也是子节点坐标原点.X.Y描述横纵向的锚点位置.注:锚点的取值是可以超过(0,0)~(1,1),即锚点并不在节点尺寸范围内. 2,子节点:子节 ...

  10. javascript中的LHS与RHS

    最近在学习javascript过程中,接触了LHS与RHS的概念,刚开始的时候有点理解不清,现在做一些梳理,方便以后进行理解. LHS与RHS:javascript引擎的两种查找类型,含义是赋值操作的 ...