Vue实现购物车实例代码两则


Posted in Javascript onMay 30, 2020

一、第一种比较简单

效果图

Vue实现购物车实例代码两则

实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>购物车案例</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
 *{
 padding: 0;
 margin:0
 }
 ul li{
 width: 1200px;
 display: flex;
 align-items: center;
 justify-content: center;
 }
 li div,.total{
 display: inline-block;
 width:200px;
 height: 50px;
 line-height: 50px;
 text-align: center;
 }
 button{
 width: 60px;
 height: 40px;
 text-align: center;
 line-height: 40px;
 }

</style>
<body>

 <div id="app">
 <ul>
  <goodsitem 
  v-for="item in goodslist" 
  :item="item" 
  :key="item.id"
  @onchange="(type)=>{handleCount(type,item)}"
  @ondelete="()=>{handleDelete(item.id)}">
  </goodsitem>
  <div class="total" style="padding-left: 113px">总价:{{total}}</div>
 </ul>
 </div>

</body>
<script>
 var computed={
 props:{
  count:{
   type:Number,
   require:true
  }
 },
 methods:{
  handleCount(type){
  this.$emit('onchange',type)
  }
 },
 template:`<div style="width:200px">
   <button @click="handleCount('sub')">-</button>
   <span>{{count}}</span>
   <button @click="handleCount('add')" >+</button>
   </div>
 
 `
 
 }
 var goodsitem={
 props:{
  item:{
  type:Object,
  require:true
  }
 },
 methods:{
  handleCount(type){
  this.$emit('onchange',type)
  },
  handleDelete(){
  this.$emit('ondelete')
  }
 },
 components:{
  computed
 },
 template:`<li>
   <div>{{item.goodsName}}</div>
   <div>{{item.price}}</div>
   <computed :count="item.count" @onchange="handleCount"></computed>
   <div>{{item.sum}}</div>
   <div><button @click="handleDelete">删除</button></div>
   </li>
   `
 }

 var app=new Vue({
 el:"#app",
 data:{
  goodslist:[{
  id:1,
  goodsName:"小可爱",
  price:100,
  count:1,
  sum:100
  },{
  id:2,
  goodsName:"小可爱",
  price:200,
  count:2,
  sum:400
  },{
  id:3,
  goodsName:"小可爱",
  price:300,
  count:3,
  sum:900
  },{
  id:4,
  goodsName:"小可爱",
  price:400,
  count:1,
  sum:400
  },
  ]
 },
 methods:{
  handleCount(type,item){
  if(type=='add'){
   item.count+=1
  }else{
   if(item.count==1){
   this.handleDelete(item.id) 
   return
   }
   item.count-=1
  }
  item.sum=item.count*item.price
  },
  handleDelete(id){
  return this.goodslist=this.goodslist.filter((item)=>{
   return id!=item.id
  })
  }
 },
 computed:{
  total(){
  return this.goodslist.reduce((total,item)=>{
   return total+=item.sum
  },0)
  }
 },
 components:{
  goodsitem
 }
 })
</script>
</html>

二、一个用vue实现的简单响应式购物车案例

实现结果

Vue实现购物车实例代码两则

如上,所有书类数据存在数组里,遍历显示在表格中,点击+和-可以实现数量和总价格的响应式变化,其中,减号到1时便添加了disabled类型,无法点击。 价格显示时通过过滤器显示的,加上Z¥符号和两位小数。项目结构为三个文件。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="style.css" rel="external nofollow" >
</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 v-for="value in item">{{value}}</td>-->
 <td>{{item.id}}</td>
 <td>{{item.name}}</td>
 <td>{{item.date}}</td>
 <!--<td>{{getFinalPrice(item.price)}}</td> 下面是过滤器语法-->
 <td>{{item.price | showPrice}}</td>
 <td>
 <button @click="increment(index)" v-bind:disabled="item.count<=1">-</button>
 {{item.count}}
 <button @click="decrement(index)">+</button>
 </td>
 <td>
 <button @click="removeHandler(index)">移除</button>
 </td>
 </tr>
 </tbody>
 </table>
 <h2>总价格: {{totalprice | showPrice}}</h2>
 </div>
 <h2 v-else> 购物车为空</h2>
</div>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
<script></script>
</body>
</html>

main.js

const app = new Vue({
 el:"#app",
 data: {
 books: [
 {
 id: 1,
 name: '算法导论',
 date: '2019-01-10',
 price: 85.00,
 count: 1
 },
 {
 id: 2,
 name: '计算机导论',
 date: '2019-02-14',
 price: 90.00,
 count: 2
 },
 {
 id: 3,
 name: '科学导论',
 date: '2019-09-10',
 price: 85.21,
 count: 1
 },
 {
 id: 4,
 name: '网络导论',
 date: '2019-08-21',
 price: 19.02,
 count: 1
 },
 ]
 },
 methods:{
 getFinalPrice(price) {
 return '$' + price.toFixed(2)
 },
 increment(index){
 /*if(this.books[index].count <= 1) return*/
 this.books[index].count--
 },
 decrement(index){
 this.books[index].count++
 },
 removeHandler(index){
 this.books.splice(index,1)
 }
 },
 filters:{
 showPrice(price){
 return '$' + price.toFixed(2)
 }
 },
 computed:{
 totalprice(){
 let tprice = 0
 for(let i = 0; i< this.books.length; i++)
 {
 tprice += this.books[i].price * this.books[i].count
 }
 return tprice
 }
 }
})

style.css

table{
 border: 1px solid #e9e9e9;
 border-collapse: collapse;
 bordre-spacing: 0;
}

th, td {
 padding: 8px 16px;
 border: 1px solid #e9e9e9;
 text-align: left;
}

th{
 backgroud-color: #f7f7f7;
 color: #5c6b77;
 font-weight: 600;
}

到此这篇关于Vue实现购物车实例代码的文章就介绍到这了,更多相关Vue 购物车内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
不错的asp中显示新闻的功能
Oct 13 Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
Vue程序调试的方法
Jun 17 Javascript
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue实现购物车案例
May 30 #Javascript
vue.js实现简单购物车功能
May 30 #Javascript
vue实现简单学生信息管理
May 30 #Javascript
vue实现学生信息管理系统
May 30 #Javascript
vue实现在线学生录入系统
May 30 #Javascript
VueJS实现用户管理系统
May 29 #Javascript
如何在vue中使用jointjs过程解析
May 29 #Javascript
You might like
我用php+mysql写的留言本
2006/10/09 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
node.js基础知识小结
2018/02/26 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
python中什么是面向对象
2020/06/11 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
使用python实现学生信息管理系统
2021/02/25 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
Otel.com:折扣酒店预订
2017/08/24 全球购物
大学生学习生活的自我评价
2013/11/01 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
创先争优标语
2014/06/27 职场文书
招标承诺书
2014/08/30 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers