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实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue.js 怎么做插件(Vue.js实现音乐播放器)
- vue实现图片上传数据库(vue.js根据图片url进行图片下载)
- vue购物车怎么实现(Vue.js框架实现购物车功能)
- vue.js入门教学第15讲(Vue.js 使用AntV X6的示例步骤)
- vue 富文本图片上传(vue.js云存储实现图片上传功能)
- vue.js开发网站的关键技术(Vue.js项目前端多语言方案的思路与实践)
- vue怎么定义router的动态路由(vue.js Router中嵌套路由的实用示例)
- vue 如何执行动态js(如何利用vue.js实现拖放功能)
- 使用vue-cli构建electron项目(MAC+PyCharm+Flask+Vue.js搭建系统)
- vue切换图片效果(Vue.js实现图片切换功能)
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- vuejs指令解析(Vue.js中的计算属性、监视属性与生命周期详解)
- 岳云鹏跟凤凰传奇谈心,说出了人生中最重要的三个人,这才成功(岳云鹏跟凤凰传奇谈心)
- 爱情可以当饭吃吗(爱情能当饭吃吗)
- Top 3 JSHS《运动与健康科学 英文 》跻身SCI体育学期刊世界前三(Top3JSHS运动与健康科学)
- 体坛传媒LOGO全新升级,多元发展迈出坚实步伐(体坛传媒LOGO全新升级)
- 超撩人治愈的绝美水彩,原来出自她之手 一笔一画令无数人沉醉(超撩人治愈的绝美水彩)
- 新手的勾线(新手的勾线)
热门推荐
- apache搭建ftp服务器(使用Apache&花生壳架设Web服务器)
- filter的用法css(CSS filter 有什么神奇用途)
- js运算符使用教程(js中不常见的运算符与操作符总结)
- MVC上传文件的方法
- SQL Server ltrimrtrim函数的用法(SQL Server ltrimrtrim 去不掉空格的原因分析)
- vue项目引入element页面(vue-element-admin项目导入和导出的实现)
- vue查询条件生成工具(vue实现四级导航及验证码的方法实例)
- iis7.5怎么安装(IIS7.5打开启用GZip压缩功能的设置教程方法)
- vue3组件通讯消息(Vue3实现Message消息组件示例)
- Visual Studio 自动添加头部注释
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9