vue实现购物车的监听


Posted in Javascript onApril 20, 2020

利用vue简单实现购物车的监听,供大家参考,具体内容如下

主要运用的vue的监听,有兴趣的可以看看实现过程

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>利用vue实现对购物车的监听</title>
 <script src="../vue.js"></script>
 <style type="text/css">
 table{
 border: 1px solid black;
 width: 100%;
 text-align: center;
 }
 th{
 height: 50px;
 }
 th, td{
 border-bottom: 1px solid #ddd;
 border-right: 1px solid #ddd;
 }
 </style>
 </head>
 <body>
 <div id="app">
 <h1>订单系统</h1>
 <table>
 <tr>
  <th>编号</th>
  <th>名称</th>
  <th>品牌</th>
  <th>价格</th>
  <th>数量</th>
  <th>操作</th>
 </tr>
 <tr v-for="val in items">
  <td>{{val.id}}</td>
  <td>{{val.name}}</td>
  <td>{{val.pinpai}}</td>
  <td>{{val.price}}</td>
  <td>
  <!-- 如果count等于0执行v-bind
  绑定一个点击事件 -->
  <button v-bind:disabled="val.count === 0" @click="val.count-=1">-</button>
  {{val.count}}
  <button @click="val.count+=1">+</button>
  
  </td>
  <td>
  <button v-on:click="val.count = 0">移除</button>
  </td>
  
 </tr>
 </table>
 <!-- 调用totalPrice -->
 你所需要支付总额为:${{totalPrice()}}
  
 </div>
 
 <script type="text/javascript" charset="UTF-8">
 var vm = new Vue({
 el:"#app",
 data:{
  items:[{
  id:1,
  name:'上衣',
  pinpai:'阿迪达斯',
  price:100,
  count:1
  },
  {
  id:2,
  name:'裤子',
  pinpai:'安踏',
  price:528,
  count:1
  },
  {
  id:3,
  name:'鞋子',
  pinpai:'耐克',
  price:999,
  count:1
  }]
 },
 
 methods:{
  totalPrice:function(){
  var totalPri = 0;
  //总价等于数量乘以数量
  for(var i=0;i<this.items.length;i++){
  totalPri += this.items[i].price*this.items[i].count;
  }
  return totalPri;
  }
 }
 });
 
 </script>
 
 
 </body>
</html>

实现效果:

vue实现购物车的监听

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取父节点方法
Aug 20 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
js实现3d悬浮效果
Feb 16 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 #Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 #Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 #Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 #Javascript
JS实现横向跑马灯效果代码
Apr 20 #Javascript
vue2.x数组劫持原理的实现
Apr 19 #Javascript
vue2.x 对象劫持的原理实现
Apr 19 #Javascript
You might like
php最简单的删除目录与文件实现方法
2014/11/28 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
Js的MessageBox
2006/12/03 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
HTML的select控件美化
2017/03/27 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
js编写简单的聊天室功能
2017/08/17 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
pygame学习笔记(4):声音控制
2015/04/15 Python
python类继承用法实例分析
2015/05/27 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
python 并发下载器实现方法示例
2019/11/22 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
html5唤起app的方法
2017/11/30 HTML / CSS
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
思想品德自我鉴定
2013/10/12 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
春晚观后感
2015/06/11 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
《学会看病》教学反思
2016/02/17 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python