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', ...
随机推荐
- HDU1402：A * B Problem Plus（FFT与大数乘法）
Calculate A * B. Input Each line will contain two integers A and B. Process to end of file. Note: th ...
- AutoIT: 如何通过坐标相对位置来对无法识别的Menu以及GridView进行定位点击操作
一般情况下,GridView中的数据来自数据库,我们通过Windows Info,是无法获取GridView中的信息的.而软件定制的Menu,很多时候无法通过系统提供的WinMenuSelectIte ...
- Day.js 是一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库，和 Moment.js 的 API 设计保持完全一样，dayjs
https://gitee.com/mirrors/Day.js api: https://gitee.com/mirrors/Day.js/blob/master/docs/zh-cn/API-re ...
- E20180305-hm-xa
raw adj. 生的,未加工的; 无经验的; 新近完成的; 发炎的,疼痛的; payload n. 有效载荷; (航天器.卫星的) 装备; (车辆等的) 装载货物; (炸弹.导弹的) 爆炸力;
- 线程Coroutines 和 Yield（转）
之前一直很纠结这个问题,在网上找到了这篇文章,给大家分享下: 第一种方法: void Start() { print("Starting " + Ti ...
- bzoj 1296: [SCOI2009]粉刷匠【dp+背包dp】
参考:http://hzwer.com/3099.html 神题神题 其实只要知道思路就有点都不难-- 先对每一行dp,设g[i][j]为这行前i个格子粉刷了k次最大粉刷正确数,随便n^3一下就行 设 ...
- [AHOI2007]密码箱
Description 在一次偶然的情况下,小可可得到了一个密码箱,听说里面藏着一份古代流传下来的藏宝图,只要能破解密码就能打开箱子,而箱子背面刻着的古代图标,就是对密码的提示.经过艰苦的破译,小可可 ...
- Create the first sql server 2016 mobile report；创建 第一个 sqlserver 2016 Mobile report
在微软收购了datazen之后,sqlserver2016 集成了mobilereport,mobile report 基于html5,兼容各类主流浏览器,之前ssrs2008 R2中很多chart类 ...
- .NET下集中实现AOP编程的框架
一.Castle 使用这个框架呢,首先是需要安装NuGet包. 先建立一个控制台项目,然后在NuGet中搜索Castle.Windsor,不出意外的话应该能找到如下的包 然后安装,会自动的安装包Cas ...
- Visual studio docker build no such file or directory
在我构建新的镜像的时候, 发生 了 no such file or directory 的错误. 这个错误找了半天, 没头绪,项目结构是这样的: WebApplication1 建立在根目录下,是 ...