码迷,mamicode.com
首页 > 其他好文 > 详细

完善慕课网Vue2.0购物车功能

时间:2017-04-27 19:32:29      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:计算属性   format   属性   created   网上   color   再计算   表单   date   

使用vue2.0实现购物车和地址选配功能这门课程,早之前就在慕课网上看了,个人感觉很不错很适合刚入门vue的新手,最近做的项目都没用vue怕自己生疏了所以就再做一下练练手顺便完善一下老师没有做的小功能。

课程中实现的功能:商品列表的渲染、使用过滤器格式化商品金额、实现单件商品的计算单选全选、实现商品总金额计算和删除商品

完善的功能:

      单选按钮选中后再计算总金额;

      单选按钮如果全部选中则全选按钮为选中状态,如果没有全部选中则为默认状态

 

先上图看一下:

技术分享

 

先创建一个vue的实例,以下列出的是本项目使用的选项参数

new Vue({
    el: ‘‘,  //挂载的元素
    data: {},  //数据
    mounted(){},  //生命周期钩子
    computed: {}, //计算属性
    methods: {},  //方法
    filters:{}   //过滤器
})

 

vue中常用的指令,本项目用到的是 v-for、v-bind、v-on

v-bind     动态的绑定数据。简写为 : 
v-on 绑定事件监听器。简写为 @
v-for 循环数据
v-model 在表单控件元素上创建双向数据绑定
v-if v-else-if v-else 条件判断指令

 

vue中的生命周期,本项目用到的是 mounted 钩子函数

beforeCreate       数据绑定前
created 数据绑定后
beforeMount 挂载之前
mounted 挂载之后
beforeUpdate 更新之前
updated 更新之后
beforeDestroy 销毁之前
destroyed 销毁之后

 

先使用vue-resource获取数据

 

先从页面里的金额开始吧,把页面所有的金额格式化统一保留两位小数,商品金额添加“¥”符号

全局过滤器方法:把 filter 挂到 Vue 上,Vue.filter(name,func); 第一个参数就是过滤器的名字,第二个参数就是一个回调函数 

Vue.filter(‘money‘,function(val,type) {
    return val.toFixed(2) + type;
});

局部过滤器方法:就是在之前实例里的 filters 选项参数里声明

filters:{
    formatMoney: function(val){
        return "¥" + val.toFixed(2);
    }
}

 

完善慕课网Vue2.0购物车功能

标签:计算属性   format   属性   created   网上   color   再计算   表单   date   

原文地址:http://www.cnblogs.com/HtmlCss3/p/6775515.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!