Vue实现简单购物车功能
本文实例为大家分享了Vue实现简单购物车功能的具体代码，供大家参考，具体内容如下
话不多少，上效果图
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div id="app">
<div v-if="books.length">
<table class="table table-dark">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">书籍名称</th>
<th scope="col">出版日期</th>
<th scope="col">书籍价格</th>
<th scope="col">购买数量</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in books">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | dealPrice}}</td>
<td>
<button class="btn btn-primary" @click="decrement(index)" :disabled="item.count <= 0">-</button>
{{item.count}}
<button class="btn btn-primary" @click="increment(index)">+</button>
</td>
<td>
<button class="btn btn-danger" @click="removeBook(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<h2>总价为 {{totalPrice | dealPrice}}</h2>
</div>
<h2 v-else>购物车为空</h2>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
books:[
{
id:1,
name:'PHP手册',
date:'2020年5月17号',
price:33,
count:1
},
{
id:2,
name:'Python手册',
date:'2020年5月17号',
price:33,
count:1
},
{
id:3,
name:'Linux手册',
date:'2020年5月17号',
price:33,
count:1
},
],
},
computed:{
totalPrice(){
let price = 0;
for (let i = 0;i<this.books.length;i++) {
price += this.books[i].price * this.books[i].count
}
return price;
}
},
methods:{
increment(index){
this.books[index].count ++
},
decrement(index) {
this.books[index].count --
},
removeBook(index) {
this.books.splice(index,1)
}
},
filters: {
dealPrice(price){
return '$' + price.toFixed(2)
}
}
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
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
-
Vue实现购物车基本功能
Vue实现购物车商品 加.减.单选.全选.删除.价格更新等功能 Dome和Vue代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>商城</title> <link rel="stylesheet" href="./css/common.css" > <link rel="s
-
vue实现商城购物车功能
本文实例为大家分享了vue实现商城购物车功能的具体代码,供大家参考,具体内容如下 首先,先上最终的效果图 效果并不是很好看,但是这不是重点. 首先,我们先看下布局: <template> <div class="shopcar" id="demo04"> <div class="header-title"> <h3>购物车</h3> </div> <div class=
-
基于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
-
vuex实现购物车功能
本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下 页面布局: 采用了element-ui的表格对商品列表和购物车列表进行布局 1.商品列表 <template> <div class="shop-list"> <table> <el-table :data="shopList" style="width: 100%"> <el-table-column label
-
vuex实现购物车的增加减少移除
本文实例为大家分享了vuex实现购物车增加减少移除的具体代码,供大家参考,具体内容如下 1.store.js(公共的仓库) import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { carList: [] //购物车的商品 }, mutations: { // 加 addCar(state, params) { let CarCon = state.ca
-
vuejs手把手教你写一个完整的购物车实例代码
由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选 下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=
-
vue+vant实现购物车全选和反选功能
本文实例为大家分享了vue+vant实现购物车全选和反选的具体代码,供大家参考,具体内容如下 这是效果图: 话不多少,直接上代码: <template> <div class="cart"> <div class="st-spacing-main" v-for="(item) in cartInfoList" :key="item.id"> <div class="st-it
-
Vuex实现购物车小功能
Vuex实现购物车功能(附:效果视频),供大家参考,具体内容如下 功能描述: 加购 删除 加减 全选反选 选中计算总价 存储 整体演示效果如下: 首先介绍一下Vuex: Vuex 实例对象属性 主要有下面5个核心属性: state : 全局访问的state对象,存放要设置的初始状态名及值(必须要有) mutations : 里面可以存放改变 state 的初始值的方法 ( 同步操作–必须要有 ) getters: 实时监听state值的变化可对状态进行处理,返回一个新的状态,相当于store的计
-
vue实现购物车列表
本文实例为大家分享了vue实现购物车列表的具体代码,供大家参考,具体内容如下 功能: 删除 单选 全选 增加数量 减少数量 计算总价 计算数量 搜索 代码: <!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.js"&