vue实现简单的购物车功能
本文实例为大家分享了vue实现简单购物车功能的具体代码，供大家参考，具体内容如下
1.实现效果：
2.涉及到的知识点：
toFixed函数、过滤器、reduce高阶函数、v-bind:disabled、v-if
3.代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>书籍购物车案例</title>
<style>
table {
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
}
th, td {
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th {
background-color: #f7f7f7;
color: #5c6b77;
font-weight:600;
}
</style>
</head>
<body>
<div id="app">
<div v-if="books.length">
<table>
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>￥{{item.price | finalPrice}}</td>
<td>
<button @click="item.count--" :disabled="item.count <=1">-</button>
{{item.count}}
<button @click="item.count++">+</button>
</td>
<td><button @click="btndelete(index)">移除</button></td>
</tr>
</tbody>
</table>
<h2>总价格：{{sumPrice | finalPrice}}</h2>
</div>
<div v-else><h2>购物车为空</h2></div>
</div>
<script src="../../js/vue.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
<script>
const app = new Vue({
el: '#app',
data: {
books: [
{
id: 1,
name: '《算法导论》',
date: '2006-9',
price: 85.00,
count:1
},
{
id: 2,
name: '《算法导论》',
date: '2006-9',
price: 85.00,
count:1
},
{
id: 3,
name: '《算法导论》',
date: '2006-9',
price: 85.00,
count:1
},
{
id: 4,
name: '《算法导论》',
date: '2006-9',
price: 85.00,
count:1
},
{
id: 5,
name: '《算法导论》',
date: '2006-9',
price: 85.00,
count:1
}
]
},
methods: {
btndelete(index){
this.books.splice(index,1);
}
},
filters: {
finalPrice(price){
return '￥' + price.toFixed(2);
}
},
computed: {
sumPrice(){
// 计算价格法1：
// let sum = 0;
// for(let book of this.books) {
// sum += book.price * book.count;
// }
// return sum;
// 计算价格法2,使用reduce函数。
return this.books.reduce(((preValue,book)=>preValue + book.count * book.price),0);
}
}
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vue实现购物车详情页面的方法
上次我们为商品分类菜单添加了显示购物数量,这篇我们继续推进项目,来实现购物车的详情页面,在开始之前我们先看它在页面中的样子: 如上所示,此页面包含了购物列表,而它由商品名称,单价,增减商品功能构成,增减商品功能我们在商品列表中实现过,那么我们现在可以进行复用. 搭出购物车结构 我们将购物车底部构建出来, <templete> <div class="shopcart" :class="{'highligh':totalCount>0}">
-
vue+vant-UI框架实现购物车的复选框全选和反选功能
购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(item,index) in shoppingListData.rows" :key="index" > <van-checkbox :value="item.goods_id" v-model="item.isChecked" ch
-
vue实现商城购物车功能
本文实例为大家分享了vue实现商城购物车功能的具体代码,供大家参考,具体内容如下 首先,先上最终的效果图 效果并不是很好看,但是这不是重点. 首先,我们先看下布局: <template> <div class="shopcar" id="demo04"> <div class="header-title"> <h3>购物车</h3> </div> <div class=
-
vue 实现购物车总价计算
效果如下所示: js <script type="text/javascript"> window.οnlοad=function () { var vm = new Vue({ el:'#huo', data:{ myList:[ { number:0, price:23 }, { number:0, price:14.5 }, { number:1, price:8 }, { number:0, price:20 } ], total:0, //总价 bestValue
-
vue实现购物车小案例
本文实例为大家分享了vue实现购物车小案例的具体代码,供大家参考,具体内容如下 最终效果 HTML部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shopcar.html</title> <script src="https://cdn.jsdelivr.net/npm/vue&q
-
vuex实现的简单购物车功能示例
本文实例讲述了vuex实现的简单购物车功能.分享给大家供大家参考,具体如下: 购物车组件 <template> <div> <h1>vuex-shopCart</h1> <div class="shop-listbox"> <shop-list/> </div> <h2>已选商品</h2> <div class="shop-cartbox"> &l
-
vue实现购物车抛物线小球动画效果的方法详解
本文实例讲述了vue实现购物车抛物线小球动画效果的方法.分享给大家供大家参考,具体如下: 先上最终效果图,在商品页面和商品详情页面点击加号添加商品时都可以看到小球抛物线落入购物车的动画效果 此文章只写了商品页面购物小球的实现,商品详情页原理类似 实现步骤: 1. 需要三个组件,最下方包含蓝色购物车的[购物车]组件shopCart.vue(子组件),每个[加减号]组成的购物小球组件cartControl.vue(子组件),和包含每个商品信息的goods组件goods.vue(父组件) 2. 原理,
-
Vue实现购物车功能
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="external nofollow" /> &l
-
vuejs手把手教你写一个完整的购物车实例代码
由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选 下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=
-
基于Vuejs实现购物车功能
本文实例为大家分享了Vuejs购物车实现代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的vue购物车</title> <link rel="stylesheet" href="css/bootstrap.min.css&q