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 相关文章推荐
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
浅析Bootstrap表格的使用
Jun 23 Javascript
一次$.getJSON不执行的简单记录
Jul 19 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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实现二分查找算法代码分享
2011/06/24 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
PHP字符串和十六进制如何实现互相转换
2020/07/16 PHP
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
2018/06/22 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
Python中xml和dict格式转换的示例代码
2019/11/07 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
GWT都有什么特性
2016/12/02 面试题
高三历史教学反思
2014/01/09 职场文书