Vue实现简单购物车小案例
本文实例为大家分享了Vue实现简单购物车的具体代码，供大家参考，具体内容如下
HTML首页
<!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>Document</title>
<link rel="stylesheet" href="/css/index.css" >
</head>
<body>
<div id="app">
<div v-if="books.length != 0">
<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 | showPrice}}</td>
<td>
<button @click="decrement(index)" :disabled="item.count <= 1">-</button>
{{item.count}}
<button @click="increment(index)">+</button>
</td>
<td><button @click="removeHandle(index)">移除</button></td>
</tr>
</tbody>
</table>
<h2>总价格为：{{totalPrice | showPrice}}</h2>
</div>
<h2 v-else>购物车为空</h2>
</div>
<script src="/js/vue.js"></script>
<script src="/js/index.js"></script>
</body>
</html>
css代码
* {
margin: 0;
padding: 0;
}
table {
margin: 100px 0 0 100px;
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: black;
font-weight: 6000 ;
}
h2 {
width: 500px;
margin-left: 100px;
}
button {
padding: 5px;
}
js代码（Vue）
const app = new Vue({
el:"#app",
data:{
books:[
{
id:1,
name:'《算法导论》',
date:'2019-2',
price:85.00,
count:1
},
{
id:2,
name:'《计算机基础》',
date:'2019-2',
price:95.00,
count:1
},
{
id:3,
name:'《c++高级语言》',
date:'2019-2',
price:89.00,
count:1
},
{
id:4,
name:'《编译原理》',
date:'2019-2',
price:77.00,
count:1
},
]
},
methods:{
decrement(index){
this.books[index].count--
},
increment(index){
this.books[index].count++
},
removeHandle(index){
this.books.splice(index,1)
}
},
computed:{
totalPrice(){
let finalPrice = 0
for(let i = 0; i < this.books.length; i++){
finalPrice += this.books[i].price * this.books[i].count
}
return finalPrice
}
},
filters:{
showPrice(price){
return '￥' + price.toFixed(2)
}
}
})
运行结果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Vuejs实现购物车功能
开始更新前端框架Vue.JS的相关博客. 功能概述 学习了Vue.JS的一些基础知识,现在利用指令.数据绑定这些基础知识开发一个简单的购物车功能.功能要点如下: (1)展示商品的名称.单价和数量: (2)商品的数量可以增加和减少: (3)购物车的总价要实时更新,即数量发生变动,总价也要相应的改变: (4)商品可以从购物车中移除: (5)具有选择功能,只计算选中的商品的总价. 上一张截图,如下: 代码 代码分成三部分,分别是HTML.JS.CSS.关键的是HTML和JS. HTML <!DOCTY
-
Vue实现购物车详情页面的方法
上次我们为商品分类菜单添加了显示购物数量,这篇我们继续推进项目,来实现购物车的详情页面,在开始之前我们先看它在页面中的样子: 如上所示,此页面包含了购物列表,而它由商品名称,单价,增减商品功能构成,增减商品功能我们在商品列表中实现过,那么我们现在可以进行复用. 搭出购物车结构 我们将购物车底部构建出来, <templete> <div class="shopcart" :class="{'highligh':totalCount>0}">
-
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实现的简单购物车功能.分享给大家供大家参考,具体如下: 购物车组件 <template> <div> <h1>vuex-shopCart</h1> <div class="shop-listbox"> <shop-list/> </div> <h2>已选商品</h2> <div class="shop-cartbox"> &l
-
vuejs手把手教你写一个完整的购物车实例代码
由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选 下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=
-
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
-
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实现购物车抛物线小球动画效果的方法.分享给大家供大家参考,具体如下: 先上最终效果图,在商品页面和商品详情页面点击加号添加商品时都可以看到小球抛物线落入购物车的动画效果 此文章只写了商品页面购物小球的实现,商品详情页原理类似 实现步骤: 1. 需要三个组件,最下方包含蓝色购物车的[购物车]组件shopCart.vue(子组件),每个[加减号]组成的购物小球组件cartControl.vue(子组件),和包含每个商品信息的goods组件goods.vue(父组件) 2. 原理,
-
Vue实现简单购物车小案例
本文实例为大家分享了Vue实现简单购物车的具体代码,供大家参考,具体内容如下 HTML首页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
-
vue实现简单的购物车小案例
本文实例为大家分享了vue实现简单购物车的具体代码,供大家参考,具体内容如下 最近在写vue的相关项目,所以找一些小例子练习一下,把一个js的购物车改成vue了 css部分是直接引入的插件 效果图如下 <template> <div class="head"> <meta charset="UTF-8"> <title>我的购物车-品优购</title> <meta name=
-
vue实现简单购物车案例
本文实例为大家分享了vue实现简单购物车的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
-
基于vue-cli、elementUI的Vue超简单入门小例子（推荐）
这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vue-cli,先全局安装一下vue-cli $ cnpm i -g vue-cli #到自己喜欢的目录下创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # # #之后会有如下询问 ? Project name (my-project) #回车 ? Pro
-
Vue实现简单购物车功能
本文实例为大家分享了Vue实现简单购物车功能的具体代码,供大家参考,具体内容如下 话不多少,上效果图 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.bootcdn.net/ajax/libs/twit
-
Python实现简单购物车小程序
本文实例为大家分享了Python实现简单购物车小程序的具体代码,供大家参考,具体内容如下 要求 代码 # --*--coding:utf-8--*-- # Author: 村雨 import pprint productList = [('Iphone 8', 10000), ('GTX2080', 8000), ('Z7KP7-GT', 6000), ('Mac pro', 15000),
-
HTML+CSS+JS实现的简单应用小案例分享
目录 1.猜数字 2.表白墙 3.切换日夜间模式 4.待办事项 1.猜数字 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&q
-
微信小程序实现简单购物车小功能
本文实例为大家分享了微信小程序实现简单购物车的具体代码,供大家参考,具体内容如下 微信小程序定制好看的购物车页面,实现购物车功能,希望对您有所帮助! 1. 应用场景2. 思路分析3. 代码分析4. 具体实现代码 效果截图: 1.应用场景 适用于商城.秒杀.商品购买等类型的小程序,负责将顾客浏览的商品保存下来,方便客户集中比较商品与购买商品. 2.思路分析 实现购物车功能前请思考以下问题: 1.小程序如何布局?使用什么布局能提升页面开发效率?? 2.将购物车功能分为四个小功能:(1)一键全选/取消
-
Vue实现图书管理小案例
本文实例为大家分享了Vue实现图书管理的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>