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 相关文章推荐
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
JavaScript自定义超时API代码实例
Apr 30 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
一个捕获函数输出的函数
2007/02/14 PHP
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
PHP session有效期问题
2009/04/26 PHP
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
php字符串截取的简单方法
2013/07/04 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
jQuery 自定义函数写法分享
2012/03/30 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python实现单词翻译功能
2017/06/06 Python
Django REST framework 分页的实现代码
2019/06/19 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
Python dict的常用方法示例代码
2020/06/23 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
Bootstrap 学习分享
2012/11/12 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
德国网上花店:Valentins
2018/08/15 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
简历中自我评价怎么写
2014/02/12 职场文书
汽车促销活动方案
2014/03/31 职场文书
2014年收银工作总结
2014/11/13 职场文书
销售辞职信范文
2015/03/02 职场文书
老乡聚会通知
2015/04/23 职场文书
高二语文教学反思
2016/02/16 职场文书