vue实现一个简单的购物车功能

今天做了一个简单的购物车功能，主要用了计算属性，指令等知识点，代码如下：

<template>
<div><div  id="cart" v-cloak><template v-if="itemlis.length"><table><thead><tr><th></th><th>商品名称</th><th>商品单价</th><th>购买数量</th><th>操作</th></tr></thead><tbody><tr v-for=" (item,index) in itemlis" :key="index"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><button
                            @click="handleReduce(index)":disabled="item.count ===1">-</button>{{item.count}}<button @click="handleAdd(index)">+</button></td><td><button @click="handleRemove(index)">移除</button></td></tr></tbody></table><div class="total">总价：¥{{totalPrice}}</div></template><div v-else>购物车为空</div></div>
</div>
</template>
<script>
import Vue from 'vue'
import VueResource from 'vue-resource'Vue.use(VueResource)
export default {data () {return {itemlis: []}},computed: {
//计算并获取总价totalPrice () {let total = 0for (let i = 0; i < this.itemlis.length; i++) {let item = this.itemlis[i]total += item.price * item.count}return total.toString().replace(/\B(?=(\d{3})+$)/g, ',')}},methods: {//获取商品列表getGoodList () {this.$http.get('api/goodlist').then(res => {var arrJson = JSON.parse(res.bodyText)this.itemlis = arrJson.data.list},function (err) {console.log(err)})},//减少商品数量handleReduce (index) {if (this.itemlis[index].count === 1) returnthis.itemlis[index].count--},//增加商品数量handleAdd (index) {this.itemlis[index].count++},//从购物车中移除该商品handleRemove (index) {this.itemlis.splice(index, 1)}},mounted () {//获取商品this.getGoodList()}
}
</script><style scoped>
.total{text-align: left ;
}
[v-cloak]{display: none;
}
table{border: 1px solid #e9e9e9;border-collapse: collapse;border-spacing: 0;empty-cells: show;
}
th,td{padding: 8px 16px;border:1px solid #e9e9e9;text-align: left }
th{background: #f7f7f7;color: #5c6b77;font-weight: 600;white-space: nowrap;
}
</style>

vue实现一个简单的购物车功能相关推荐

vue使用组件化思想实现一个简单的购物车页面
vue使用组件化思想实现一个简单的购物车页面文章目录 vue使用组件化思想实现一个简单的购物车页面页面预览项目结构组件介绍主页面ShopCar Header组件 Goods组件 Count组 ...
【Vue3.0实战逐步深入系列】扩展投票功能基于elementui进行组件封装实现一个简单的问卷调查功能
[千字长文,熬夜更新,原创不易,多多支持,感谢大家] 前言小伙伴们大家好.在前面一偏文章中我们把投票功能进行了简单的改造:引入了axios第三方库并进行了二次封装用于模拟请求服务器数据.同时添加了一 ...
实现一个简单的投票功能
实现一个简单的投票功能最近项目中需要用到一个投票功能,当时觉得简单,向都没想就动手开始做,没想到走了不少弯路. 后来才发现,是想的太过简单了.来看看改进后的功能. 第一步:数据库设计两个表:一个主 ...
android实现计算器功能吗,利用Android实现一个简单的计算器功能
利用Android实现一个简单的计算器功能发布时间:2020-11-20 16:25:01 来源:亿速云阅读:90 作者:Leah 今天就跟大家聊聊有关利用Android实现一个简单的计算器功能, ...
vue设置一个简单的计算器
vue设置一个简单的计算器 <div id="app"><input type="text" v-model="n1"&g ...
java计算机毕业设计vue开发一个简单音乐播放器（附源码、数据库）
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...
一个简单的购物车加减按钮
一个简单的购物车加减按钮,自定义控件实现,非常简单,有兴趣的可以自己尝试一下 import android.content.Context; import android.util.Attribute ...
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署本源码技 ...
知识图谱实战应用11-基于py2neo构建一个简单的问答功能
大家好,我是微学AI,今天给大家介绍一下知识图谱实战应用10-基于py2neo构建一个简单的问答功能,利用知识图谱来实现智能的问答功能.知识图谱是一种用于表示实体之间关系的图形化模型,它是人工智能和自 ...

vue实现一个简单的购物车功能

vue实现一个简单的购物车功能相关推荐

最新文章

热门文章