Vue+Bootstrap实现购物车程序（2）
先简单看下效果图：（在原先基础上添加了删除和筛选操作）
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>购物车</title>
<!--rel 属性指示被链接的文档是一个样式表,说白了就是指明你链进来的对象是个什么-->
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
button{
outline: none;
}
</style>
</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>
<td><input type="checkbox" v-on:click="selectAll" name="selectAllBtn"/></td>
<th>ID</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品总价</th>
</tr>
<tr v-for="(product,index) in products">
<td>
<input type="checkbox" v-on:click="checkItem(product)" v-model="product.state" name="checkbox" />
</td>
<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 style="overflow: hidden">
<div class="btn-group" role="group" style="float:left;">
<button type="button"
v-for="button in buttons"
v-bind:class="\'btn \'+button.class"
v-on:click="button.handler"
>{{button.title}}</button>
</div>
<div style="float:right;">
<input class="form-control"
v-model="searchProduct"
@keyup.enter="filterProduct"
type="text"
placeholder="请输入商品名称"/>
</div>
</div>
`,
data:function(){
return{
searchProduct:'',
buttons:[
{title:'添加',class:'btn-primary',handler:function(){alert('点击添加按钮')}},
{title:'修改',class:'btn-default',handler:function(){alert('点击修改按钮')}},
{title:'删除',class:'btn-default',handler:function(){
for(let i =;i<app.products.length;i++){
if(app.products[i].state){
app.products.splice(i,);
i--;
}
};
/* 全选按钮状态清空 */
document.querySelectorAll('input[name="selectAllBtn"]')[].checked = false;
}}
]
}
},
methods:{
/* 商品筛选 */
filterProduct:function(){
var searchArr = [];
for(let i=;i<app.products.length;i++){
searchArr.push(app.products[i].name)
}
var searchIndex = searchArr.indexOf(this.searchProduct);
if(searchIndex !== -){
app.products = app.products.filter(function(element, index, self){
/* element数组元素、index元素索引、self数组本身 */
return index == searchIndex;
})
}
}
}
})
var app = new Vue({
el:'#app',
data:{
products: [
{
name: '小米6S',
price: ,
count: ,
state:false
},
{
name: '锤子2',
price: ,
count: ,
state:false
},
{
name: '华为P20',
price: ,
count: ,
state:false
},
{
name: 'OPPO R15',
price: ,
count: ,
state:false
},
{
name: 'OPPO R11',
price: ,
count: ,
state:false
},
],
searchProduct:''
},
methods:{
// 用户点击加减数量时调用
cutCount:function(product){
if(product.count>){
product.count--
}else{
alert('商品数量不能小于0')
}
},
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;
}
*/
checkItem:function(product){
product.state = !product.state;
},
selectAll:function() {
var checkObj = document.querySelectorAll('input[name="checkbox"]'); // 获取所有checkbox项
if (event.target.checked) {
// 点击全选事件
for (var i = ; i < checkObj.length; i++) {
checkObj[i].checked = true;//选中样式
app.products[i].state = true;//动态改变值，供删除用
}
} else {
for (var i = ; i < checkObj.length; i++) {
checkObj[i].checked = false;
app.products[i].state = false;
}
}
}
},
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>
修该：props传值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>购物车</title>
<!--rel 属性指示被链接的文档是一个样式表,说白了就是指明你链进来的对象是个什么-->
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<style type="text/css">
button{
outline: none;
}
</style>
</head>
<body>
<!--
container布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
、container 类用于固定宽度并支持响应式布局的容器。、.container-fluid 类用于 % 宽度，占据全部视口（viewport）的容器。
-->
<div id="app" class="container">
<h1>购物车</h1>
<hr>
<btn-grp v-bind:buttons="buttons"></btn-grp>
<br>
<br>
<table class="table table-bordered table-striped table-hover">
<tr>
<td><input type="checkbox" v-on:click="selectAll" name="selectAllBtn"/></td>
<th>ID</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品总价</th>
</tr>
<tr v-for="(product,index) in products">
<td>
<input type="checkbox" v-on:click="checkItem(product)" v-model="product.state" name="checkbox" />
</td>
<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:['buttons'],
//btn-group：基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
// role="group"按钮组合
template:`
<div style="overflow: hidden">
<div class="btn-group" role="group" style="float:left;">
<button type="button"
v-for="button in buttons"
v-bind:class="\'btn \'+button.class"
v-on:click="button.handler"
>{{button.title}}</button>
</div>
<div style="float:right;">
<input class="form-control"
v-model="searchProduct"
@keyup.enter="filterProduct"
type="text"
placeholder="请输入商品名称"/>
</div>
</div>
`,
data:function(){
return{
searchProduct:''
}
},
methods:{
/* 商品筛选 */
filterProduct:function(){
var searchArr = [];
for(let i=;i<app.products.length;i++){
searchArr.push(app.products[i].name)
}
var searchIndex = searchArr.indexOf(this.searchProduct);
if(searchIndex !== -){
app.products = app.products.filter(function(element, index, self){
/* element数组元素、index元素索引、self数组本身 */
return index == searchIndex;
})
}else{
alert('暂无符合商品');
}
}
}
})
var app = new Vue({
el:'#app',
data:{
products: [
{
name: '小米6S',
price: ,
count: ,
state:false
},
{
name: '锤子2',
price: ,
count: ,
state:false
},
{
name: '华为P20',
price: ,
count: ,
state:false
},
{
name: 'OPPO R15',
price: ,
count: ,
state:false
},
{
name: 'OPPO R11',
price: ,
count: ,
state:false
},
],
searchProduct:'',
buttons:[
{title:'添加',class:'btn-primary',handler:function(){alert('点击添加按钮')}},
{title:'修改',class:'btn-default',handler:function(){alert('点击修改按钮')}},
{title:'删除',class:'btn-default',handler:function(){
for(let i =;i<app.products.length;i++){
if(app.products[i].state){
app.products.splice(i,);
i--;
}
};
/* 全选按钮状态清空 */
document.querySelectorAll('input[name="selectAllBtn"]')[].checked = false;
}}
]
},
methods:{
// 用户点击加减数量时调用
cutCount:function(product){
if(product.count>){
product.count--
}else{
alert('商品数量不能小于0')
}
},
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;
}
*/
checkItem:function(product){
product.state = !product.state;
},
selectAll:function() {
var checkObj = document.querySelectorAll('input[name="checkbox"]'); // 获取所有checkbox项
if (event.target.checked) {
// 点击全选事件
for (var i = ; i < checkObj.length; i++) {
checkObj[i].checked = true;//选中样式
app.products[i].state = true;//动态改变值，供删除用
}
} else {
for (var i = ; i < checkObj.length; i++) {
checkObj[i].checked = false;
app.products[i].state = false;
}
}
}
},
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实现购物车程序（2）的更多相关文章
- Vue+Bootstrap实现购物车程序（3）
效果展示:(说明:使用webpack重构购物车程序,使用vue-cli生成项目脚手架) 文件结构: 代码: (1)将原来编写的btn-grp组件单独编写到BtnGrp.vue文件中 可以看到现在代码清 ...
- Vue+Bootstrap实现购物车程序（1）
先看下案例效果:(简单的数量控制及价格运算) 代码: <!DOCTYPE html> <html> <head lang="en"> <m ...
- 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', ...
随机推荐
- Linux共享内存(二)
Linux共享内存编程实例 原文链接:http://blog.csdn.net/pcliuguangtao/article/details/6526119 /*共享内存允许两个或多个进程进程共享同一块 ...
- bzoj 2194: 快速傅立叶之二【NTT】
看别的blog好像我用了比较麻烦的方法-- (以下的n都--过 \[ c[i]=\sum_{j=i}^{n}a[i]*b[j-i] \] 设j=i+j \[ c[i]=\sum_{j=0}^{n-i} ...
- XML(php中获取xml文件的方式/ajax获取xml格式的响应数据的方式)
1.XML 格式规范: ① 必须有一个根元素 ② 不可有空格.不可以数字或.开头.大小写敏感 ③ 不可交叉嵌套 ④ 属性双引号(浏览器自动修正成双引号了) ⑤ 特殊符号要使用实体 ⑥ 注释和HTML一 ...
- [Swift通天遁地]一、超级工具-(4)使用UIWebView(网页视图)加载HTML和Gif动画
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 作为一个程序员，你了解 win 上有哪些必装的软件吗
关于 win 的一些基础必知内容之前已经分享过,没有看过的可以戳此处→Windows 使用之那些你还不知道操作 新系统安装的第一个软件 Google Chrome 毫无疑问,作为程序员应该是首选的浏览 ...
- 通过IDEA制作包含Java应程序的Docker镜像
IDEA官网在IDEA中把Java App制作成Docker镜像并启动一个容器运行 在idea上使用docker作为java的开发环境[][] ubuntu+docker+docker-compose ...
- [USACO 2012 Feb Gold] Cow Coupons【贪心 堆】
传送门1:http://www.usaco.org/index.php?page=viewproblem2&cpid=118 传送门2:http://www.lydsy.com/JudgeOn ...
- 题解报告：hdu1995汉诺塔V（递推dp）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1995 Problem Description 用1,2,...,n表示n个盘子,称为1号盘,2号盘,. ...
- Styles and Themens(3)android所有主题表
The Android platform provides a large collection of styles and themes that you can use in your appli ...
- B/S和C/S示意图
B/S C/S