Vue+Bootstrap实现购物车程序（1）
先看下案例效果：（简单的数量控制及价格运算）
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>购物车</title>
<!--rel 属性指示被链接的文档是一个样式表,说白了就是指明你链进来的对象是个什么-->
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<!--
container布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
、container 类用于固定宽度并支持响应式布局的容器。、.container-fluid 类用于 % 宽度，占据全部视口（viewport）的容器。
-->
<div id="app" class="container">
<h1>购物车</h1>
<hr>
<btn-grp></btn-grp>
<br>
<br>
<table class="table table-bordered table-striped table-hover">
<tr>
<th>ID</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品总价</th>
</tr>
<tr v-for="(product,index) in products">
<td>{{index+}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>
<!--可以将两个按钮的方法合成一个，通过传参-->
<!--<button @click="changeCount(prod, -1)">-</button>-->
<button @click="cutCount(product)" class="btn btn-default btn-sm">-</button>
<input type="number" v-model="product.count"/>
<!--<button @click="changeCount(prod, 1)">-</button>-->
<button @click="addCount(product)" class="btn btn-default btn-sm">+</button>
</td>
<td>{{product.price * product.count}}</td>
</tr>
<tr>
<!--text-right排版文本右对齐-->
<td colspan="" class="text-right">总价:</td>
<!--text-primary辅助类文本-->
<td class="text-primary">{{totalMoney}}</td>
<!--方法调用：<td class="text-primary">{{getTotalMoney()}}</td>-->
</tr>
</table>
</div>
<script type="application/javascript" src="vue-2.6.9.min.js"></script>
<script type="application/javascript">
Vue.component('btn-grp',{
props:['button'],
//btn-group：基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
// role="group"按钮组合
template:`
<div class="btn-group" role="group">
<button type="button"
v-for="button in buttons"
v-bind:class="\'btn \'+button.class"
v-on:click="button.handler"
>{{button.title}}</button>
</div>
`,
data:function(){
return{
buttons:[
{title:'添加',class:'btn-primary',handler:function(){alert('点击添加按钮')}},
{title:'修改',class:'btn-default',handler:function(){alert('点击修改按钮')}},
{title:'删除',class:'btn-default',handler:function(){alert('点击删除按钮')}}
]
}
}
})
var app = new Vue({
el:'#app',
data:{
products: [
{
name: '小米6S',
price: ,
count: ,
},
{
name: '锤子2',
price: ,
count: ,
},
{
name: '华为P20',
price: ,
count: ,
},
{
name: 'OPPO R15',
price: ,
count: ,
},
{
name: 'OPPO R11',
price: ,
count: ,
},
],
},
methods:{
// 用户点击加减数量时调用
cutCount:function(product){
if(product.count>){
product.count--
}
},
addCount:function(product){
product.count++
}
/*
用户点击加减数量时调用通过传参合并为一个函数
changeCount: function(prod, num) {
if(num < 0) {
if(prod.count > 0) {
prod.count += num;
}
}
else {
prod.count += num;
}
},
*/
/*获取总价除了计算属性也可以用方法
getTotalMoney: function() {
var totalMoney = 0.0;
for(var i = 0; i < this.products.length; ++i) {
totalMoney += parseFloat(this.products[i].price * this.products[i].count);
}
return totalMoney;
}
*/
},
computed:{
totalMoney:function(){
var price = ;
for(var i = ; i < this.products.length; ++i) {
price += parseFloat(this.products[i].price * this.products[i].count);
}
return price;
}
}
})
</script>
</body>
</html>
.
Vue+Bootstrap实现购物车程序（1）的更多相关文章
- Vue+Bootstrap实现购物车程序（3）
效果展示:(说明:使用webpack重构购物车程序,使用vue-cli生成项目脚手架) 文件结构: 代码: (1)将原来编写的btn-grp组件单独编写到BtnGrp.vue文件中 可以看到现在代码清 ...
- Vue+Bootstrap实现购物车程序（2）
先简单看下效果图:(在原先基础上添加了删除和筛选操作) 代码: <!DOCTYPE html> <html> <head lang="en"> ...
- vue.js实现购物车功能
购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...
- 基于 Vue BootStrap的迷你Chrome插件
代码地址如下:http://www.demodashi.com/demo/14306.html 安装 安装 Visual Studio Code 和Chrome, 自行FQ 详细安装这里略过 安装包管 ...
- 用vue.js实现购物车功能
购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...
- 利用JSP编程技术实现一个简单的购物车程序
实验二 JSP编程 一.实验目的1. 掌握JSP指令的使用方法:2. 掌握JSP动作的使用方法:3. 掌握JSP内置对象的使用方法:4. 掌握JavaBean的编程技术及使用方法:5. 掌握JSP ...
- 简单购物车程序（Python）
#简单购物车程序:money_all=0tag=Trueshop_car=[]shop_info={'apple':10,'tesla':100000,'mac':3000,'lenovo':3000 ...
- vue项目向小程序迁移调研
概述 今天调研了一下vue项目怎么向小程序迁移,有些心得,记录下来,供以后开发时参考,相信对其他人也有用. 基本上vue项目向小程序迁移不外乎2种方法,一种是用小程序的web-view组件,另一种是用 ...
- python学习：购物车程序
购物车程序 product_list = [ ('mac',9000), ('kindle',800), ('tesla',900000), ('python book',105), ('bike', ...
随机推荐
- Hibernate是如何延迟加载的
Hibernate是如何延迟加载的 2011-12-24 13:58 242人阅读 评论(0) 收藏 举报 hibernatespringinterceptordao数据库integer Hibern ...
- gearcache在qemu-kvm虚拟化平台下的实现
需要用到的数据结构: 链表,基树. gearcache在qemu-kvm虚拟化平台下的实现主要有以下的步骤: 1.打开镜像文件的时候,为gearcache中的基数池(page_node_pool)和读 ...
- Java 内部类理解
为什么使用内部类? 答:每个内部类都能独立地继承一个(接口的)实现,所以无论外围类是否已经继承了某个(接口的)实现,对于内部类都没有影响. 内部类有哪些? 答:内部类一般来说包括这四种:成员内部类.局 ...
- BZOJ_4591_[Shoi2015]超能粒子炮·改_Lucas定理
BZOJ_4591_[Shoi2015]超能粒子炮·改_Lucas定理 Description 曾经发明了脑洞治疗仪&超能粒子炮的发明家SHTSC又公开了他的新发明:超能粒子炮·改--一种可以 ...
- Spring事物注意事项
一.尽量用注解声明事务 过去开发喜欢用tx:advice+aop命名空间方式来配置事务,一次配置对满足切点规则的方法永久生效.但也可能因此导致事务滥用,在不需要用到事务的地方用了会影响系统的并发性能. ...
- luogu4917天守阁的地板
https://www.zybuluo.com/ysner/note/1317548--- 题面 给出\(n\),用所有长为\(a\).宽为\(b\)\((1\leq a,b\leq n)\)的长方形 ...
- 洛谷P2943 清理——DP
题目:https://www.luogu.org/problemnew/show/P2943 一眼看去就有个 n^2 的做法:f[i] = min{ f[j] + num( i - j ) * num ...
- maven仓库错误
1.jai_core 时间:2018年3月21日10:04:57 URL:https://mvnrepository.com/artifact/javax.media/jai_core/1.1.3 / ...
- 例题3-4 master-mind hints
下面先附上我的水货代码,,,,一会附上,,,刘大婶给的代码///////3ms #include<stdio.h> #include<string.h> int main() ...
- [SDOI2016]墙上的句子
题目描述 考古学家发现了一堵写有未知语言的白色墙壁,上面有一个n行m列的格子,其中有些格子内被填入了某个A至Z的大写字母,还有些格子是空白的. 一直横着或竖着的连续若干个字母会形成一个单词,且每一行的 ...