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 相关文章推荐
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
JS实现扫雷项目总结
May 19 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
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
python生成器表达式和列表解析
2016/03/10 Python
django之session与分页(实例讲解)
2017/11/13 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
Python对列表的操作知识点详解
2019/08/20 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
Python 可视化神器Plotly详解
2020/12/26 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
幼儿园大班开学教师寄语
2014/04/03 职场文书
幼儿园小班评语
2014/04/18 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
毕业生评语大全
2015/01/04 职场文书
员工自我工作评价
2015/03/06 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
Oracle笔记
2021/04/05 Oracle
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android