非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 ...
随机推荐
- Java — CommonUtil
一些Java的公用方法: 1:获取当前时间 2:判断当前时间是否在时间date2之前3:比较时间大小4:获取某个时间的前n个小时5:返回某个字符串时间的Calendar对象6:判断两个时间段是否有重叠 ...
- Mysql推荐使用规范
一.基础规范 使用InnoDB存储引擎支持事务.行级锁.并发性能更好.CPU及内存缓存页优化使得资源利用率更高 推荐使用utf8mb4字符集无需转码,无乱码风险, 支持emoji表情以及部分不常见汉字 ...
- android手机短信获取
关于Android中对短信的一些相关操.我看到一个文章下面我就从标题中的三个方面来对Android系统中的短信操作进行一个简单地学习. 短信发送: 由于Android中对短信发送方法的优良封装,之后对 ...
- linux文件名乱码解决
问题描述:公司的FTP服务器早就搭建好,windows客户端可以上传文件到FTP服务器,但是上传去的文件在LINUX目录下文件是乱码. 解决方法:首先编辑/etc/sysconfig/i18n这个文件 ...
- 关于CC的完全非线性椭圆方程一书的一些小结
CC的整本书主要是想要研究在粘性解的框架下的一致椭圆方程解的正则性.我们试着一章一章来解析他. 序言部分也是值得每一个字细读的,主要讲述了他们的工作的主要内容,即在粘性解的框架下研究解的正则性,需要特 ...
- 448. Find All Numbers Disappeared in an Array&&645. Set Mismatch
题目: 448. Find All Numbers Disappeared in an Array Given an array of integers where 1 ≤ a[i] ≤ n (n = ...
- 有趣的if循环
今天,在论坛看到一个有趣的if 循环,我感觉有不错,就分享出来 问题,列表只有6个数,为什么打印8个数?原理? q = ['a', 'b', 'c', 'd', 'e', 'f'] for i in ...
- webpack打包vue项目，资源路径如何从绝对路径改为相对路径？css中的图片资源如何修改配置？
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- ajax提交不进入后台报415错误
Unsupported Media Type错误 问题所在为后台缺包和xml配置文档缺配置或配置不正确: Jackson的依赖问题,spring3.x和spring4.x是不同的: spring3.x ...
- [转]axios的兼容性处理
来源: https://www.cnblogs.com/leaf930814/p/6807318.html ---------------------------------------------- ...