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方法,之后会深入研究。
VUE2.0实现购物车和地址选配功能学习第六节的更多相关文章
- VUE2.0实现购物车和地址选配功能学习第七节
第七节 卡片选中,设置默认 1.卡片选中html:<li v-for="(item,index) in filterAddress" v-bind:class="{ ...
- VUE2.0实现购物车和地址选配功能学习第五节
第五节 单件商品金额计算和单选全选功能 1.vue精髓在于操作data模型来改变dom,渲染页面,而不是直接去改变dom 2.加减改变总金额功能: html:<div class="c ...
- VUE2.0实现购物车和地址选配功能学习第四节
第四节 v-on实现金额动态计算 用¥金额 进行格式处理,可以使用原生js进行转换,但是在vuei,使用filter过滤器更加方便 注: 1.es6语法=>和import等 好处在于res参数后 ...
- VUE2.0实现购物车和地址选配功能学习第三节
第三节 使用v-for渲染商品列表 1.使用vue-resource插件引入json数据 (注:在谷歌中调试打断点-- ,console还可以输出vm,res等属性列表,或者productList等一 ...
- VUE2.0实现购物车和地址选配功能学习第二节
第二节 创建VUE实例 购物车项目计划: 1.创建一个vue实例 2.通过v-for指令渲染产品数据 3.使用filter对金额和图片进行格式化 4.使用v-on实现产品金额动态计算 5.综合演示 ① ...
- VUE2.0实现购物车和地址选配功能学习第一节(来源--慕课网河畔一角)
第一节 vue知识 vue-resource:和后台交互的一个插件,实现get.post和jsonp等功能.(替代jQuery) vue特点: 1.易用:通过创建vue实例,{{}}绑定数据十分方便 ...
- 关于慕课网《使用vue2.0实现购物车和地址选配功能》的总结
视频学习网址:http://www.imooc.com/learn/796 源码打包:https://codeload.github.com/fachaoshao/Vue-ShoppingCart/z ...
- vue2.0实现购物车功能
购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据 功能列表: 1.全选和单选结算 2.减少和增加数量 3.商品的删除 界面搭建以及布 ...
- vue购物车和地址选配(三)
参考资料:vue.js官网 项目演示: 项目源代码: 核心代码及踩坑 删除: new Vue({ el:'#app', data:{ productlist:[], totalMoney:0, che ...
随机推荐
- Swift去除两边的特定字符(空格或其它)
var str_trim = " !hi !23 !" str_trim.stringByTrimmingCharactersInSet(NSCharacterSet.w ...
- word页眉页脚 首页 索引 正文各不同的处理方法
1.在目录和正文之间,加入分隔符——分节符——下一页,然后再添加页眉页脚,然后再添加索引:
- iOS 之 OC开发实战
iOS 开发之登陆 iOS 程序初始一个带导航栏的视图 iOS 添加导航栏两侧按钮 iOS UITabBar
- 【Android】Activity
一.Android四大组件 Activity.Service.BroadCastReceiver.ContentProvider. 二.Activity的继承关系 三.建立.配置和使用Activity ...
- Angular - - ngCloak、ngController、ngInit、ngModel
ngCloak ngCloak指令是为了防止Angular应用在启动加载的时候html模板将会被短暂性的展示.这个指令可以用来避免由HTML模板显示造成不良的闪烁效果. 格式: ng-cloak ...
- shell 命令合并文本
之前想把代码打印出来看来着,后来合并完之后放在word里发现有2000多页,然后放弃了~anyway,这个命令还是挺有用的. 比如我有文本a001.dat, a002.dat, a003.dat .. ...
- HTML <head>
HTML <head> 元素 <head> 元素包含了所有的头部标签元素.在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种met ...
- C# 定时器计划任务
函数类: public class MyPlan { public void RunMyplan(object source, ElapsedEventArgs e) { //读取配置文件设定的日期时 ...
- HTML5获取当前的经纬度坐标
使用IE10可以查看出结果:chrome和ff都没有正确显示: <!DOCTYPE html> <html lang="en"> <head> ...
- CSS页面渲染优化属性will-change
前面的话 当我们通过某些行为(点击.移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用CPU去计算与重绘,由于没有事先准备,应付渲染够呛,于是掉帧卡顿.而CSS属性wi ...