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 相关文章推荐
取得传值的函数
Oct 27 Javascript
javascript 框架小结 个人工作经验
Jun 13 Javascript
javascript 快速排序函数代码
May 30 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
JavaScript获取网页表单action属性的方法
Apr 02 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
React组件的三种写法总结
Jan 12 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 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将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
vue实现拖拽效果
2019/12/23 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
python创建文件备份的脚本
2018/09/11 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
基于keras中的回调函数用法说明
2020/06/17 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
结婚典礼证婚词
2014/01/11 职场文书
节能宣传周活动总结
2014/05/08 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
项目合作协议书
2014/09/23 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
2014年车间工作总结
2014/11/21 职场文书