非node环境下的vue.js 实现简单的购物车计算功能 样式请无视
都说vue的双向数据绑定好用，自己用了下，感觉做购物车没想象中好用。自己的实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="checkedAll">
<ul>
<li v-for="(item,index) in shopingcart">
<input type="checkbox" v-model="checkedNames[index]"><img
:src="item.imgUrl"
alt="">
<div><span class="price">￥{{item.unitPrice}}</span></div>
<div class="item-amount "><a href="#" class="J_Minus no-minus" @click="minus(index)">-</a><input
@change="num(event,index)"
type="text"
v-model="item.quantity"
class="text text-amount J_ItemAmount"
autocomplete="off"><a href="#"
class="J_Plus plus"
@click="add(index)">+</a>
</div>
<div class="td-inner"><em tabindex="0" class="J_ItemSum number">￥{{Math.ceil(parseFloat(item.unitPrice*item.quantity)*10)/10}}</em>
<div class="J_ItemLottery"></div>
<div class="weight" data-spm-anchor-id="a1z0d.6639537.1997196601.i2.4cf574843pYndQ">
({{Math.ceil(parseFloat(item.weight*item.quantity)*100)/100}}kg)
</div>
</div>
</li>
</ul>
<span>Checked names: {{ checkedNames }}</span>
<input type="checkbox" v-model="checkedAll"> <span>{{goodTotal}}</span>件 合计：<span>{{priceAll}}</span> 结算
</div>
<script>
var Data = {
test: [
{
imgUrl: 'https://img.alicdn.com/bao/uploaded/i2/725677994/TB1Z1mzXMmTBuNjy1XbXXaMrVXa_!!0-item_pic.jpg_80x80.jpg',
unitPrice: 29.90,
weight: 0.2,
detail: '百草味 黄桃干100g*2 零食蜜饯水果干 杏果果脯杏脯',
quantity: 1
},
{
imgUrl: 'https://img.alicdn.com/bao/uploaded/i2/725677994/TB1Z1mzXMmTBuNjy1XbXXaMrVXa_!!0-item_pic.jpg_80x80.jpg',
unitPrice: 19.90,
weight: 0.15,
detail: '百草味 黄桃干100g*2 零食蜜饯水果干 杏果果脯杏脯',
quantity: 1
},
{
imgUrl: 'https://img.alicdn.com/bao/uploaded/i2/725677994/TB1Z1mzXMmTBuNjy1XbXXaMrVXa_!!0-item_pic.jpg_80x80.jpg',
unitPrice: 9.90,
weight: 0.31,
detail: '百草味 黄桃干100g*2 零食蜜饯水果干 杏果果脯杏脯',
quantity: 1
}
]
}
var app = new Vue({
el: '#app',
data: {
goodTotal: 0,
priceAll: 0,
checkedAll: false,
shopingcart: Data.test,
checkedNames: []
},
methods: {
add: function (index) {
this.shopingcart[index].quantity++;
console.log(this.shopingcart[index].quantity);
// 如果checkedNames存在，即是选中
if (this.checkedNames.length > 0) {
this.recalculation(this.checkedNames);
}
},
num: function (event, index) {
if (event.target.value <= 0) {
return false
}
var obj = event.target;
this.shopingcart[index].quantity = event.target.value;
// 如果checkedNames存在，即是选中
if (this.checkedNames.length > 0) {
this.recalculation(this.checkedNames);
}
},
minus: function (index) {
if (this.shopingcart[index].quantity <= 1) {
return false
}
this.shopingcart[index].quantity--;
// 如果checkedNames存在，即是选中
if (this.checkedNames.length > 0) {
this.recalculation(this.checkedNames);
}
},
checkAll: function () {
if (!this.checkAll) {
this.checkAll = !this.checkAll;
}
},
recalculation: function (newVal) {
var _this = this,
Total = 0,
priceAll = 0;
// 获取总数total和合计元
newVal.forEach(function (item, index) {
if (item == true) {
Total += parseInt(_this.shopingcart[index].quantity);
priceAll += _this.shopingcart[index].unitPrice * _this.shopingcart[index].quantity;
}
})
this.goodTotal = Total;
this.priceAll = Math.ceil(parseFloat(priceAll) * 100) / 100;
}
},
watch: {
checkedNames: function (newVal) {
console.log(newVal)
// 选项发生变化，重新计算价格
this.recalculation(newVal);
},
checkedAll: function (Val) {
var _this = this;
if (!Val) {
_this.checkedNames = []
return false;
}
// 先置为空，保证checkedNames发生变化
_this.checkedNames = []
this.shopingcart.forEach(function (item, index) {
// _this.checkedNames[index] = true 此处有bug，为何？
_this.checkedNames.push(true)
})
}
}
})
/*
* 受现代js的限制，vue不能检测到对象属性的添加或删除。
* 由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的
* */
</script>
</body>
</html>
闲来无事，使用非node环境的vue，写一些功能，vue主要是数据的变化，个人感觉是这样，第一次写微博，难免疏漏，请谅解。
本人试过直接，把checkbox的value和text的value直接绑定，数量为空时会有true和false出现，所以用checkedNames数组的形式控制多个input值，数据变化参考最下方span标签。
这里还有个坑就是受现代js的限制，vue不能检测到对象属性的添加或删除。
本例子没使用es6箭头函数，因此使用_this获取vue对象。
本例子通过监听checkedNames的变化，每次重新计算所有商品的数量变化，从而实现所有商品价格的计算，有些地方感觉有bug，但是没弄懂，希望大家一起探讨
非node环境下的vue.js 实现简单的购物车计算功能 样式请无视的更多相关文章
- Window环境下搭建Vue.js开发环境
原文链接:http://blog.csdn.net/solo95/article/details/72084907 笔者最近在进行前端的学习,在点完了HTML5.CSS3.JavaScript等技能树 ...
- Node.js（window）基础（2）——node环境下的模块，模块间调用
参考:http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450241959 ...
- 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用
一.什么是 RestTemplate? RestTemplate是执行HTTP请求的同步阻塞式的客户端,它在HTTP客户端库(例如JDK HttpURLConnection,Apache HttpCo ...
- 非域环境下搭建自动故障转移镜像无法将 ALTER DATABASE 命令发送到远程服务器实例的解决办法
非域环境下搭建自动故障转移镜像无法将 ALTER DATABASE 命令发送到远程服务器实例的解决办法 环境:非域环境 因为是自动故障转移,需要加入见证,事务安全模式是,强安全FULL模式 做到最后一 ...
- 非域环境下使用证书部署数据库(SqlServer2008R2)镜像
非域环境下使用证书部署数据库(SqlServer2008R2)镜像 前言 部署数据库镜像一般有两种方式域环境下部署http://liulike.blog.51cto.com/1355103/33918 ...
- MyBatis在非Spring环境下第三方DataSource设置-Druid篇
首先在ITEye上面看到一个同标题文章,在此说明,此文并非转载自 http://iintothewind.iteye.com/blog/2069522 ,因为这篇文章根本就是错误的,照着上面做,工程可 ...
- 非域环境下SQL Server搭建Mirror（镜像）的详细步骤
1.测试验证环境 服务器角色 机器名 IP SQL Server Ver 主体服务器 WIN-TestDB4O 172.83.XXX.XXX SQL Server 2012 - 11.0.5058.0 ...
- node环境下：node_modules里面的文件
node环境下:node_modules里面的文件 package.json来制定名单,需要哪些npm包来参与到项目中来,npm install命令根据这个配置文件增减来管理本地的安装包. depen ...
- 基于vue.js的简单用户管理
功能描述:添加.修改.搜索过滤 效果图: <!DOCTYPE html> <html lang="en"> <head> <title&g ...
随机推荐
- 解决一次git问题
由于特殊原因,工作中不能使用sourcetree,今天遇到了一个问题记录一下解决办法,后续还是得好好去廖雪峰大神那里学习一下git的命令行操作呀 You have not concluded your ...
- dp入门之01背包问题
...通过暴力手推得到的一点点感觉 动态规划是相对于贪心算法的一种取得最优解的算法,通过对每一步的取舍判断从 0 推到所拥有的第 n 件物品,每次判断可以列写出状态转移方程,通过记忆化相对暴力地取得最 ...
- GC知识记录
2.关于Minor GC,Major GC与Full GC 1) Minor GC:即新生代的GC,指发生在新生代的垃圾收集动作.当新生代的Eden区内存不足时,就会触发Minor GC.由于对象创 ...
- java 枚举使用教程
转载:https://blog.csdn.net/newbie_907486852/article/details/81027512 一.枚举型常量 首先枚举是一个特殊的class,这个class相当 ...
- 软件理论基础—— 第一章命题逻辑系统L
逻辑 语法 语义 推理系统 公理 推理规则 MP A,A->B =>B HS A->B,B->C => A->C 命题逻辑公式 ::= BNF backus ...
- photoKit使用笔记
@主要用到的类 1PHAssetCollection:图片资源数组(代表着相簿数组) 作用:获取相簿资源数组 示例代码: //获取相簿资源 PHFetchResult<PHAssetCollec ...
- win2008 401 - 未授权: 由于凭据无效，访问被拒绝。解决方法
iiis中一个小配置的问题,“身份验证”里面“启用匿名身份验证”,编辑匿名身份验证凭据,选中下面的“应用程序池标识” 就可以了
- VUE基本常识
1.运行vue项目 项目根目录git Bash here npm run dev 为了能直接打开项目 配置项目package.json 添加--open 如下图: 2.坑:VUE初写小项目问 ...
- Matlab:正则Euler分裂
函数文件1: function b=F(x0,h,u,tau) b(,)=x0()-u(); b(,)=x0()-u()+*h*1e8*cos(tau)*x0(); 函数文件2: function g ...
- Vue.js错误: Maximum call stack size exceeded
这几天正自学Vue, 用eggjs + vue 采用前后分离,写一个网站练练手. 增加了一个商品详情页 Detail.vue的时候,点击进入Detail.vue的时候,页面显示空白,打开浏览器调试工具 ...