基于vue的购物车清单
<!doctype html>
<html> <head>
<meta charset="utf-8">
<link rel="stylesheet" href="node_modules\bootstrap\dist\css\bootstrap.css">
</head> <body>
<div id="app">
<!-- bootstrap 基本样式+增强样式-->
<div class="container"> <div class="row">
<h2 class="text-warning">购物车</h2>
<table class="table table-hover table-bordered"> <tr>
<th>全选 <input type="checkbox" v-model="checkAll"></th>
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<!-- 括号与in之间要加空格不然会语法错误 -->
<tr v-for="(product,index) in products">
<td><input type="checkbox" v-model="product.isSelected"></td>
<!-- 使用vue指令动态绑定图片的相关信息 -->
<td><img :src="product.productCover" :title="product.productName"
alt="1">{{product.productName}}</td>
<td>{{product.productPrice}}</td>
<td><input type="number" min="1" v-model.number.lazy="product.productCount"
onkeyup="this.value=this.value.replace(/\D|^0/g,'')"
onafterpaste="this.value=this.value.replace(/\D|^0/g,'')"></td>
<!-- 通过过滤器展示更好地效果 -->
<td>{{product.productCount*product.productPrice | toFixed(2)}}</td>
<td><button type="button" class="btn btn-danger" @click='removes(product)'>删除</button></td>
</tr>
<tr>
<td colspan="6">总价格：{{sum | toFixed(2)}} </td>
</tr>
</table>
</div> </div>
</div>
</body>
<!-- vue基于依赖关系引入位置放哪都行 -->
<script src="node_modules\axios\dist\axios.js"></script>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
// 当给全选赋值时应要影响其他人的变化，当页面刷新时，时根据下面的
// checkbox计算出来的结果给全选赋值
computed: { //放在computed中最后也会放在vm上，不能与methods等重名
checkAll: {
//当products变化会重新计算
get() { //get和set this指向实例，v-model会获取checkAll得值，会调用get方法
return this.products.every(p => p.isSelected);
},
set(val) { //当我们给checkbox赋值的时候调用,val等于checkAll的值
this.products.forEach(p => p.isSelected = val)
} },
//sum的值会被缓存
sum() { //将计算属性写成函数则默认调用get
return this.products.reduce((pre, next) => {
if (!next.isSelected) return pre;
return pre + next.productPrice * next.productCount;
}, 0)
}
},
filters: {
toFixed(input, num) { //第二个参数为小数点个数
return '￥' + input.toFixed(num);
}
},
//专门用来发送AJAX的方法
created() { //数据初始化会被调用，this指向的也是vm实例，钩子函数
this.getData();
},
data: {
products: [],
},
methods: {
removes(p) {
this.products = this.products.filter(item => item !== p);
},
getData() {
axios.get(
'https://www.easy-mock.com/mock/5d537a1cf651bc6ff265fb77/example/result/cart.json')
.then((res) => {
this.products = res.data.data; //这里需要根据自己用的接口返回的数据来赋值
// console.log(res.data); }).catch((err) => {
console.log(err); //这里应使用箭头函数，this才能指向vm实例
});
}
}
});
</script> </html>
//这里使用的是本地的资源文件，如果需要使用，请将代码内的资源文件用CDN引入
基于vue的购物车清单的更多相关文章
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core，如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- 基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...
- 基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1]
基于Vue JS, Webpack 以及Material Design的渐进式web应用 [Part 1] 原文:基于Vue JS, Webpack 以及Material Design的渐进式web应 ...
- 在微信框架模块中，基于Vue&Element前端的事件和内容的管理
在微信后台管理中,我们需要定义好菜单对应的事件管理,因为微信通过菜单触发相关的事件,因此菜单事件的响应关系,我们如果处理好,就能构建出我们的微信应用入口了.通过入口,我们可以响应用户菜单的事件,如响应 ...
- 基于Vue+Vuex+iView的电子商城网站
MALL-VUE 这是一个基于VUE + VUEX + iView做的一个电商网站前端项目, 附带前后端分离实现版本(在forMallServer分支),欢迎fork或star 项目地址: https ...
- Vue实战-购物车案例
Vue实战-购物车案例 普通购物车 实现的功能:添加商品到购物车,计算总价 <!DOCTYPE html> <html lang="en"> <hea ...
- 一次基于Vue.Js用户体验的优化
.mytitle { background: #2B6695; color: white; font-family: "微软雅黑", "宋体", "黑 ...
- 发布自己第一个npm 组件包（基于Vue的文字跑马灯组件）
一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...
随机推荐
- Android：状态栏禁用时蓝牙多文件传输弹窗及进度显示
一.蓝牙文件传输弹窗 Android原生蓝牙传输文件时,会弹出蓝牙文件接收的确认框且默认是以notification的形式显示在状态栏,当用户点击之后才会弹出一个dialog.那么当状态栏被禁用时,如 ...
- hadoop格式化
1.hadoop启动时,namenode没有启动起来 1.删除 namenode产生的临时文件 tmp 2.删除datanode的数据,否则也不行.(如果datanode有数据,请自己备份) ./bi ...
- 使用select和show命令查看mysql数据库系统信息
(1).select 显示当前日期和时间 mysql> select now(); +---------------------+ | now() | +-------------------- ...
- Ubuntu 16.04 haproxy 简单配置应用
HAproxy HAProxy是一个使用C语言编写的自由及开放源代码软件,其提供高可用性.负载均衡,以及基于TCP和HTTP的应用程序代理. 测试环境 ubuntu16.04 192.168.20 ...
- 【ARTS】01_31_左耳听风-201900610~201900616
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...
- EasyNetQ使用(九)【非泛型的发布&订阅扩展方法，发生错误的情况 】
自从EasyNetQ第一个版本开始,它就可以发布/订阅特定类型的消息. bus.Subscribe<MyMessage>("subscriptionId", x =&g ...
- 移动架构-IOC架构设计
控制反转(Inversion of Control,缩写为IoC),是面向对象编程中的一种设计原则,可以用来减低计算机代码之间的耦合度.其中最常见的方式叫做依赖注入(Dependency Inject ...
- mysql数据恢复，binlog详解
个人博客:mysql数据恢复,binlog详解 binlog日志恢复数据,是挽救错误操作和数据损坏一根救命稻草,所以认识和使用binglog对于技术人员还是很有必要的 binlog一般用于 主从复制 ...
- java积累的细节问题
一.将几个数字进行拼接,拼接成字符串 一定要将""放到几个数字之前,否则就会把数字相加之后的数转化成字符串 如你需要拼接年份,月份,和日 如果:2018+12+13+"& ...
- 嵌入式Linux学习笔记之第一阶段---基础篇
嵌入式Linux学习分五个阶段 第一阶段: 01嵌入式环境搭建初期 02C语言语法概述 03C语言内存操作 04c语言函数 05linux基础 06gun基础 第二阶段: 01-linux之io系统编 ...