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中汉字显示乱码问题(已解决)
Dec 27 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
Dojo 学习要点
Sep 03 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
常见的原始JS选择器使用方法总结
Apr 09 Javascript
js简单实现Select互换数据的方法
Aug 17 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
Jun 27 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 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
加速XP搜索功能堪比vista
2007/03/22 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
Python基础入门之seed()方法的使用
2015/05/15 Python
python3使用GUI统计代码量
2019/09/18 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
借条如何写
2015/05/26 职场文书
元旦晚会开场白
2015/05/29 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
分享Python获取本机IP地址的几种方法
2022/03/17 Python