首页 > 代码库 > 完善慕课网Vue2.0购物车功能

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

2024-09-17 20:12:21   206人阅读

使用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购物车功能


联系
我们