用Vue的一个购物车(1),虽然是自己写的但是也是来源于脚本之家的案例,就算转载啦
2016-11-28 08:55
555 查看
百度的时候看别人的代码总是,这几天没有事情,这几天项目需要,随便研究了一下巴拉巴拉巴拉,写了一个demo,大家看看,结果,看不懂,果然是太笨了,我是纯菜鸟啊!!!!TOT,然后我也不知道怎么才能把这个代码格式弄得很好看,
css部分
<div> 展示:商品名称,商品价格,商品购买数量,操作按钮,商品总价<br> 方法:增加方法addNum,减少方法reduceNum,移除商品removeGoods<br> 计算属性:计算总价<br> 添加input框,输入值,响应更新<br> </div> <div id="container"> <h3>我的购物车</h3> <div class="myTitle"> <ul> <!--//input的value通过v-model绑定,通过addCommodity()实现响应更新--> <li>商品名称:<span><input type="text" v-model="inputName"/></span></li> <li>商品价格:<span><input type="number" v-model="inputPrice"/></span></li> <li>商品数量:<span><input type="number" v-model="inputNum"/></span></li> <li>操作/ <button v-on:click="addCommodity(items.length)">加入</button></li> </ul> </div> <!--判断items长度,渲染不同模板,因为切换不是很频繁所以选择v-if渲染--> <template v-if="items.length"> <div class="myContent"> <ul v-for = "(index,item) in items" v-bind:id = item.id> <li>{{item.name}}</li> <li>¥{{item.price}}</li> <li> <span v-on:click = "addNum(index)"><button>+</button></span> <span>{{item.count}}</span> <span v-on:click = "reduceNum(index)"><button>-</button></span> </li> <li><button v-on:click = "removeGoods(index)">移除</button></li> </ul> </div> <div class="priceAll"> <!--currency过滤器 : 将输入的数字转换成现金的过滤器。可以跟上货币符号(默认$)和保留的小数位(默认2)。--> <span>总价:{{priceTotal | currency '¥' '2'}}</span> </div> </template> <template v-else> <div class="tips"> 您的购物车空了, 你是否需要<a href="#">重新挑选</a> </div> </template> </div>js部分
var vm = new Vue({ el: "#container", data: { //items : commodityData items: [{ name: "腰子树", price: 1, id: 1, count: 1 }, ], inputName: "", inputPrice: null, inputNum: null, }, computed: { //计算属性,计算总价格,返回给页面展示 priceTotal: function() { var price = 0; //遍历items数组,计算当前(this)price字段和count字段的价格总和 for(var i = 0; i < this.items.length; i++) { price += this.items[i].price * this.items[i].count; } return price; } }, methods: { addCommodity: function(length) { //通过手动输入商品加入商品 if(this.inputNum == null || this.inputName == null || this.inputPrice == null){ alert("请填写完整商品名称,价格以及数量!") }else{ if(this.inputNum > 10 || this.inputNum < 1) { alert("请输入1-10之间的数字!"); } else { this.items.push({ name: this.inputName, price: this.inputPrice, id: "goods" +length, count: this.inputNum }); }; this.inputName = null; this.inputPrice = null; this.inputNum = null; } }, addNum: function(index) {//实现增加购买数量 var current = this.items[index]; if(current.count >= 10) { alert("库存不够"); } else { current.count++; } }, reduceNum: function(index) { //实现减少购买数量 var current = this.items[index]; if(current.count <= 1) { alert("数量不能小于1"); } else { current.count--; } }, removeGoods: function(index) { //vue1.0有方法this.items.$remove(item);需要从html传入一个参数item,2.0移除后用splice操作数组实现 //实现移除操作 this.items.splice(index, 1); } } });
css部分
* { margin: 0; padding: 0; } #container { width: 90%; margin: 0 auto; border: 1px solid #000; } h3 { width: 100%; height: 40px; line-height: 40px; text-align: center; margin: 0; border-bottom: 1px solid #000; } .myTitle, .myContent { font-size: 0; width: 100%; padding: none; list-style: none; } .myTitle li, .myContent li { width: 25%; font-size: 14px; height: 30px; line-height: 30px; text-align: center; display: inline-block; } .myTitle li:not(:first-child), .myContent li:not(:first-child) { box-sizing: border-box; border-left: 1px solid #000; } .myContent ul { border-top: 1px solid #000; } .priceAll,.tips{ border-top: 1px solid #000; }
相关文章推荐
- 用Vue写的一个计时游戏,来源于脚本之家的代码,自己写了注释,修改了部分地方
- 【头像变更】自己瞎做一个头像,放真实头像做头像虽然真诚,但是心里实在不想!
- 下面介绍一个开源的OCR引擎Tesseract2。值得庆幸的是虽然是开源的但是它的识别率较高,并不比其他引擎差劲。网上介绍Tessnet2也是当时时间排名第三的识别引擎,只是后来慢慢不维护了,目前是G
- ASP.NET AJAX客户端编程之旅(六)——来做一个自己的客户端控件(转载)
- 我们期待自己成为一个优秀的软件模型设计者,但是,要怎样做,又从哪里开始呢?
- 转载一个SAP下载工具的代码,仅用于学习(来源于:http://www.dalestech.com/)
- 转载一个SAP下载工具的代码,仅用于学习(来源于:http://www.dalestech.com/)
- 作为练习,是帮别人免费做的一个。做东西不能没有收获,虽然是小东西,且用vb但是尽量想些正规一点
- 关于数据类型Char(看了论坛的帖子后自己写的)——原来一个中文字在java中也是一个char
- 我们期待自己成为一个优秀的软件模型设计者(转载)
- 房地产是一个地方的支柱产业,也是带动性很强的企业,所以个人想买房,关键看自己了,托他两年,看看情况
- 转载一个SAP下载工具的代码,仅用于学习(来源于:http://www.dalestech.com/)
- 嵌入另一个网页 [转载]也是在自己的blog中记录一下,方便查询。
- 一个自己写的脚本,留作参考
- 自己写的一个menu脚本
- (转贴)我们期待自己成为一个优秀的软件模型设计者,但是,要怎样做,又从哪里开始呢?
- 一个生成唯一序号的服务,虽然技术不先进,但是很好用
- 转载:给自己一个成功的理由
- 转载一个SAP下载工具的代码,仅用于学习(来源于:http://www.dalestech.com/)
- 转载:VC运行库版本不同导致链接.LIB静态库时发生重复定义问题的一个案例分析和总结