vue编写简单的购物车功能_vue.js

来源:脚本之家  责任编辑:小易  

使用vue写出简单的购物车,供大家参考,具体内容如下

代码:

// An highlighted block
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  .cl{
   border: 1px solid black;
   width: 300px;
   margin: 30px;
   padding: 15px;
  }
 </style>
</head>
<body>
 <div id="app">
  <div class="cl" v-for="(item,index) in items">
   <h4>{{item.sname}}</h4>
   <button @click="item.sum==0?item.sum==0:item.sum--">-</button>
   <span>{{item.sum}}</span>
   <button @click="item.sum++">+</button>
   <span>{{item.sprice}}元/斤</span>
  </div>

  <table>
   <tr>
    <th>选择</th>
    <th>商品名</th>
    <th>商品数量</th>
    <th>商品价格</th>
   </tr>
   <tr v-for="(item,index) in items">
    <td><input type="checkbox" :checked="item.isSelect" @click="item.isSelect=!item.isSelect"></td>
    <td>{{item.sname}}</td>
    <td>{{item.sum}}</td>
    <td>{{item.sprice*item.sum}}</td>
   </tr>
   <tr>
    <td><input type="checkbox" @click="selectProduct(isSelectAll)" :checked="isSelectAll">全选</tf>
    <td>合计</tf>
    <td>{{total.totalNum}}</tf>
    <td>{{total.totalPrice}}</tf>
   </tr>
  </table>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
  new Vue({
   el:'#app',
   data:{
    items:[
     {
      'sname':'苹果',
      'sum':1,
      'sprice':'10',
     },
     {
      'sname':'香蕉',
      'sum':1,
      'sprice':'12',
     },
     {
      'sname':'橘子',
      'sum':1,
      'sprice':'8',
     },
    ]
   },
   methods:{
    selectProduct:function(_isSelect){
     for(var i=0 ,len=this.items.length;i<len;i++){
      this.items[i].isSelect=!_isSelect;
     }
    },
    
   },
   computed:{
    isSelectAll:function(){
     return this.items.every(function(val){return val.isSelect})
    },
     total:function(){
     var prolist = this.items.filter(function(val){return val.isSelect});
     totalpri = 0;
     totalnum = 0;
     for (var i = 0;i<prolist.length;i++){
      totalpri+=prolist[i].sprice*prolist[i].sum;
      totalnum+=prolist[i].sum
     }
     
     return{totalNum:totalnum,totalPrice:totalpri}
    }
   },
   mounted:function(){
    var _this=this;
    this.items.map(function(item){
     _this.$set(item,'isSelect',false)
    })
   }
  })
 </script>
</body>
</html>


  • 本文相关:
  • vue——前端生成二维码的示例
  • vue 页面加载进度条组件实例
  • vue export import 导入导出的多种方式与区别介绍
  • vant weapp组件踩坑:picker的初始赋值解决
  • vue项目出现页面空白的解决方案
  • vue.js中组件中的slot实例详解
  • karma+webpack搭建vue单元测试环境的方法示例
  • vue 中几种传值方法(3种)
  • 解决vantui popup 弹窗不弹出或无蒙层的问题
  • vue组件开发初探
  • vuejs中怎么实现按钮组单选
  • .vue文件怎么写js代码
  • 怎样用vue.js和ajax实现商品列表的更新
  • 有没有大神可以写一个vue.js,点击更改当前div样式...
  • 如何利用Vue.js库实现两个数据进行加法运算
  • Vue.js给html元素绑定标题
  • 请问大神知道京东这样的定位效果展示,用java语言怎...
  • Vue.js的几个简单属性方法
  • vue中,在页面加载完成后,JS再写入带@click的HTML...
  • js自动生成的html代码怎么调用vue方法
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库vuejs手把手教你写一个完整的购物车实例代码基于vuejs实现购物车功能vue实现购物车功能vue实现商城购物车功能vuex实现的简单购物车功能示例vue实现购物车小案例vuejs实现购物车功能vue.js实现的购物车功能详解vue+vant-ui框架实现购物车的复选框全选和反选功能vue 实现购物车总价计算vue——前端生成二维码的示例vue 页面加载进度条组件实例vue export import 导入导出的多种方式与区别介绍vant weapp组件踩坑:picker的初始赋值解决vue项目出现页面空白的解决方案vue.js中组件中的slot实例详解karma+webpack搭建vue单元测试环境的方法示例vue 中几种传值方法(3种)解决vantui popup 弹窗不弹出或无蒙层的问题vue组件开发初探vue引用js文件的多种方式(推荐)vue之父子组件间通信实例讲解(prvue props用法详解(小结)详解vue 路由跳转四种方式 (带参简单理解vue中props属性vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fo使用vue实现图片上传的三种方式vue 进阶教程之v-model详解vue实现文件上传功能基于vue实现支持按周切换的日历vue.draggable实现表格拖拽排序效果使用 vue-i18n 切换中英文效果vuedraggable+element ui实现页面控件拖拽vue一次性简洁明了引入所有公共组件的方法基于vue.js与wordpress rest api构建单页vue-router实现tab标签页(单页面)详解浅析vue项目中使用keep-alive步骤vue的注意规范之v-if 与 v-for 一起使用教vue+mockjs模拟数据实现前后端分离开发的
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved