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', ...
随机推荐
- gdb core调试
原文链接 http://blog.163.com/lanka83/blog/static/32637615200801793020182/http://blog.csdn.net/taina2008/ ...
- join示例分析
join示例分析 public class TestJoin { public static void main(String[] args) throws InterruptedException ...
- bzoj 1911: [Apio2010]特别行动队【斜率优化dp】
仔细想想好像没学过斜率优化.. 很容易推出状态转移方程\( f[i]=max{f[j]+a(s[i]-s[j])^2+b(s[i]-s[j])+c} \) 然后考虑j的选取,如果选j优于选k,那么: ...
- Ocelot（八）- Ocelot不支持的几个方面
不支持 Ocelot不支持的几个方面 Chunked Encoding - Ocelot将始终获取正文大小并返回Content-Length标头.很抱歉,如果这对您的用例不起作用! 转发主机标头 - ...
- Ubuntu18安装sublime 3
转自 https://blog.csdn.net/qq_41590417/article/details/80461075 wget -qO - https://download.sublimetex ...
- git提交报错SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version
git push报错 git push origin master Administrator@FREESKYC-92DB80 /e/git/ouyida3/ouyida3.github.io (ma ...
- Servlet，jsp，jsp的9大内置对象
以servlet作为控制器 1:servlet的生命周期:以下方法都是servlet容器进行调用 1)构造函数:只被调用一次,当项目启动时或者该servlet被容器第一次调用时,会创建servlet实 ...
- SSH的安装及使用
ssh(secure shell--加密远程登录管理服务器) ,是一种安全的传输协议,主要用于给远程登录会话的数据进行加密,保证数据传输的安全.Ubuntu客户端可以通过SSH访问远程服务器.SSH的 ...
- Matlab实现Butterworth滤波器 分类： 图像处理 2014-06-02 00:05 527人阅读 评论(0) 收藏
下面是用Matlab实现的Butterworth高通.低通滤波器. clc;clear all;close all; I=imread('cameraman.tif'); subplot(3,2,1) ...
- tabBar隐藏方式
如果是从A push到B,并且把A的一个东西传到B,那么在push时就要隐藏tabBar,并且要在B ViewController设置一个接收A传到的属性. 这种方式一般用在表格点选,要把表格点选的内 ...