标签:计算属性 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); } }
标签:计算属性 format 属性 created 网上 color 再计算 表单 date
原文地址:http://www.cnblogs.com/HtmlCss3/p/6775515.html