非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 ...
随机推荐
- 遗传算法（GA）
来自:https://blog.csdn.net/u010451580/article/details/51178225 遗传算法是模仿生物进化机制的随机全局搜索和优化方法.借鉴达尔文进化论和孟德尔的 ...
- leecode第二百三十五题（二叉搜索树的最近公共祖先）
/** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * TreeNode ...
- Cordova入门系列（一）创建项目
Cordova是什么? 初学Cordova的人,虽然了解一点点,知道Cordova是用来将html, css, js变成app的,但并不知道到底是怎么用的,原理是什么.经常会有这样的困惑: 它是一个可 ...
- S3T mongodb GUI
下载 cd ~/Downloads wget https://download.studio3t.com/studio-3t/linux/2019.2.1/studio-3t-linux-x64.ta ...
- 怎么样启用红米手机5的ROOT权限
红米手机5能如何拥有了root超级权限?各位清楚,android机器有root超级权限,一旦手机拥有了root相关权限,就能够实现更强的功能,举个栗子各位公司的营销部门的妹纸,使用较多营销工具都需要在 ...
- 学习web components
javascript里的两种组件 1 autonomous custom elements 一般extends HTMLElement, 可以通过<popup-info>或doducmen ...
- 2 Class类
在程序运行期间,Java运行时系统始终为所有的对象维护一个被称为运行时地类型标识.这个信息跟踪着每个对象所属地类.虚拟机 利用运行时类型信息选择相应地方法执行. 然而,可以通过专门地Java类访问这 ...
- windows+Apache+mod_wsgi+flask部署笔记
windows是用的2008 server 64位. 照着网上教程即可:https://www.jianshu.com/p/0aa1c7097976 但是有个问题: Apache2.4怎么配置???跟 ...
- div凹角实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 小白的python之路Linux部分10/28&29
属主属组其他人对文件的rwx权限 1.userdel删东西不全,会有残留,