zoukankan      html  css  js  c++  java
  • vue界面初始化查询列表的方法之购物车案例-------支付界面

    new Vue({

      el:".container",

      data:{

        addressList:[],

        limitNum:3,

        currentIndex:0, //用于选择地址,调用:class="{'check':index==currentIndex}" @click="currentIndex=index"

        shippingMethod:1,//使用见文档底部图片

      },

      mounted:function(){

        this.$nextTick(function(){

          getAddressList()

        })

      },

      computed:{//computed一般用于实时计算

        filterAddress:function(){ for循环中的过滤器,初始化时只显示三个地址。调用 v-for = "(item ,index) in filterAddress"

          return this.addressList.slice(0,this.limitNum); 截取前3个

        }

      },

      methods:{

        getAddressList:function(){

          this.$http.get("data/address.json").then(response=>{

            var res =response.data;

            if(res.status == "0"){

              this.addressList = res.result

            }

          })

        },

        loadMord:function(){ //显示全部地址

          this.limitNum = this.addressList.length

        },

        setDefault:function(addressId){

          this.addressList.forEach((address,index)=>{

            if(address.addressId==addressId){

              address.isDefault = true;

            }else{

              address.isDefault = false;

            }

          })

        }

      }  

    })

  • 相关阅读:
    99乘法表-利用数组
    100以内素数
    99乘法表
    第6周小组作业:软件测试和评估
    第4周小组作业:WordCount优化
    第2周个人作业:WordCount
    博客阅读和思考
    第一个C#窗体应用程序开发总结-----单号单面法调整单操作程序
    实验十——一维数组的定义及引用
    实验九——基本数据类型存储及应用总结
  • 原文地址:https://www.cnblogs.com/cxdxm/p/6662981.html
Copyright © 2011-2022 走看看