VUE2.0实现购物车和地址选配功能学习第六节

第六节 地址列表过滤和展开所有的地址

html：
<li v-for="(item,index) in filterAddress">
js：
new Vue({
    el:'.container',
    data:{
        limitNum:3,
        addressList:[],
    },
    mounted:function () {
      this.$nextTick(function () {
          this.getAddressList();
      });
    },
    computed:{
      filterAddress:function () {
          return this.addressList.slice(0,this.limitNum);
          /*return this.addressList.slice(0,3);*/
      }
    },
    methods:{
        getAddressList:function () {
            var _this=this;
            this.$http.get("data/address.json").then(function (response) {
                var res=response.data;
                if(res.status=="1"){
                    _this.addressList=res.result;
                }
            });
        },
        loadMore:function () {
            this.limitNum=this.addressList.length;
        },

    }
    });

 

效果：

这章主要是用computed的slice方法，之后会深入研究。