vue购物车怎么实现(Vue.js框架实现购物车功能)
类别:编程学习 浏览量:1499
时间:2021-10-20 08:38:05 vue购物车怎么实现
Vue.js框架实现购物车功能本文实例为大家分享了Vue.js框架实现购物车的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../lib/vue.min.js"></script> </head> <body> <li id="app" style="position: relative;left: 30%"> <table cellpadding="10"> <thead> <th><input type="checkbox" v-model="cb" v-on:click="allSelect">全选</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> <th>操作</th> </thead> <tbody> <tr v-for="x in info"> <td><input type="checkbox" v-model="x.bol" v-on:click="sign()"></td> <td>{{x.name}}</td> <td>{{x.price}}</td> <td><input type="number" v-model="x.num" min="0" style="width: 50px;text-align: center" v-on:click="count(x)" v-on:change="count(x)"></td> <td>{{x.total}}</td> <td><button v-on:click="del(x)">删除</button></td> </tr> </tbody> </table> <Br> <p>总金额:{{all}}</p> </li> <script> var vm = new Vue({ el: "#app", data: { all: 0, cb: false, info: [{ bol: false, name: "iphone7", price: 6000, num: 1, total: 6000 }, { bol: false, name: "荣耀6x", price: 1200, num: 1, total: 1200 }, { bol: false, name: "dell笔记本", price: 4000, num: 1, total: 4000 }] }, methods: { //计算单价 count: function(obj) { for(var i = 0; i < this.info.length; i++) { // if(this.info[i] == obj) { this.info[i].total = obj.price * obj.num; } //如果被选中了,就计算总价格 if(obj.bol) { this.allSelect(); } } }, //删除 del: function(obj) { this.info.splice(this.info.indexOf(obj), 1) this.allCount(); }, //单选 sign: function() { this.allCount(); }, //全选 allSelect: function() { for(var i = 0; i < this.info.length; i++) { this.info[i].bol = this.cb; } this.allCount(); }, //计算总价 allCount: function() { //每次计算总价都要清空 this.all = 0; for(var i = 0; i < this.info.length; i++) { //计算被选中的商品 if(this.info[i].bol) { this.all += this.info[i].total; } } } } }) </script> </body> </html>
效果图:
更多文章可以点击《Vue.js前端组件学习教程》学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vuejs指令解析(Vue.js中的计算属性、监视属性与生命周期详解)
- vue 如何执行动态js(如何利用vue.js实现拖放功能)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- vue 富文本图片上传(vue.js云存储实现图片上传功能)
- vue.js入门教学第15讲(Vue.js 使用AntV X6的示例步骤)
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- vue购物车怎么实现(Vue.js框架实现购物车功能)
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- vue切换图片效果(Vue.js实现图片切换功能)
- vue怎么定义router的动态路由(vue.js Router中嵌套路由的实用示例)
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- 是不是快乐全被你拿走了(而是你得到的)
- 世界上只有妈妈好(世界上只有妈妈好的歌词)
- 为什么现在社会越来越卷了(现在社会为什么发展那么快呢)
- 直播带货能赚到很多钱吗(直播带货能赚到很多钱吗现在)
- 做网红真的很能赚钱吗(做网红真的很能赚钱吗)
- 10句英语常用(英语常用900句)
热门推荐
- SQL中patindex的用法
- mysql数据库数据分析(详解MySQL数据库千万级数据查询和存储)
- mysql的主从复制怎么做(MySQL主从复制原理以及需要注意的地方)
- react的setstate第二个参数(示例详解react中useState的用法)
- 利用数据库安装centos7(CentOS安装SQL Server vNext CTP1教程)
- angular兄弟组件调用方法(Angular封装WangEditor富文本组件的方法)
- 阿里云服务器攻击了怎么办(云服务器被攻击了补救措施)
- nginx 怎么搭建web服务器(Linux+Nginx+Php架设高性能WEB服务器)
- docker1.12.5容器假死(解决docker run后容器出现Exited 0情况的问题)
- python真的能高效处理excel报表吗(Python数据报表之Excel操作模块用法分析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9