非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 ...
随机推荐
- .NET常用功能
1.判断对象判不为null或不为""或不为"undefined" public static bool isNotNullOrBlank(Object obj) ...
- springBoot 项目war包部署及改为war包后资源路径错误问题
参考资料: https://blog.csdn.net/rico_zhou/article/details/83415114 https://blog.csdn.net/pz641/article/d ...
- Project D | Digital life
I have a dream. 1999年黑客帝国就已经提出了数字化生命的雏形,近些年的黑镜和其他科幻电影更是脑洞大开,但是生命科学的进展却差强人意. 当今人类世界里有三大复杂系统:以细胞为基础的生命 ...
- 2018-2019-2 网络对抗技术 20165303 Exp3 免杀原理与实践
实验内容 一. 正确使用msf编码器(0.5分),msfvenom生成如jar之类的其他文件(0.5分),veil-evasion(0.5分),加壳工具(0.5分),使用shellcode编程(1分) ...
- 在Vue项目中使用Element UI:按需引入和完整引入
下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...
- BUAAOO-First-Summary
目录 homework & class & trainning : 两次上机.三次作业.四周课堂 code analysis & review : 为什么我没有bug 黑盒测试 ...
- orangepi one AP模式配置
前两天买了一块orangepi one开发板,目的是做个局域网共享目录,具体共享协议用samba:这块板子有两个网卡,一个有线一个无线:有线主要用来ssh登陆调试,修改配置. 首先下载armbian的 ...
- LInux下几种定时器的比较和使用
在数据通信过程中,会遇到对数据发送时间的格式要求.所以要在应用中根据实际要求选择不同的定时器,就要考虑到几种应用定时器的特点. 定时器文章参考 一般而言有, 1.sleep,usleep和nanosl ...
- 用EPPlus 读取excel,代码出错, the given key is not present in the dictionary
using (ExcelPackage ep = new ExcelPackage(new FileInfo(path))) { ExcelWorksheet ws = ep.Workbook.Wor ...
- Java 面向对象 知识点基础浅谈
1.类和对象的关系 类是一个抽象的模板,对象是根据模板制造出来的,只有类建立之后,对象才可以在类中实例化对象.举个例子讲:我要用黄金浇筑一块砖,我会在一个模型里进行,这样才能有砖的形状,那模型即是类, ...