Vue+Bootstrap实现购物车程序(3)
效果展示:(说明:使用webpack重构购物车程序,使用vue-cli生成项目脚手架)
文件结构:
代码:
(1)将原来编写的btn-grp组件单独编写到BtnGrp.vue文件中
可以看到现在代码清晰了很多,template标签部分编写模板,script标签部分编写组件的交互代码,编写方式和原先写在HTML的代码一致
现在整个前端应用都是基于组件化的,代码变得更加清晰了
<!--vue组件-->
<template>
<div style="float:right;">
<input class="form-control"
v-model="searchProduct"
@keyup.enter="filterProduct"
type="text"
placeholder="请输入商品名称"/>
</div>
</template> <script type="application/javascript">
// import App from '../App';
export default{
name:"BtnGroup",
props:['products'],
data:function(){
return {
searchProduct:''
}
},
methods:{
/* 商品筛选 */
filterProduct:function(){
// console.log(this.$parent.products)
var searchArr = [];
for(let i=;i<this.$parent.products.length;i++){
searchArr.push(this.$parent.products[i].name)
}
var searchIndex = searchArr.indexOf(this.searchProduct);
if(searchIndex !== -){
this.$parent.products = this.$parent.products.filter(function(element, index, self){
/* element数组元素、index元素索引、self数组本身 */
return index == searchIndex;
})
}else{
alert('暂无符合商品');
}
}
} }
// module.exports = BtnGroup;
// export default BtnGroup;
// export default {
// props: ['buttons']
// }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--翻译:添加“scoped”属性以仅将CSS限制为此组件-->
<style type="text/css" scoped> </style>
(2)将原来写在HTML中的代码重构到App.vue中
此处因为需要用到BtnGrp组件,所以需要先import 组件,然后在components中引用该组件
<!--主页组件--> <template>
<div id="app" class="container">
<h1>购物车</h1>
<hr>
<!--<BtnGroup v-bind:buttons="buttons"></BtnGroup>-->
<div style="overflow: hidden">
<div style="float: left">
<button type="button" v-on:click="addHandler" class="btn btn-primary">添加</button>
<button type="button" v-on:click="changeHandler" class="btn btn-default">修改</button>
<button type="button" v-on:click="delateHandler" class="btn btn-default">删除</button>
</div>
<BtnGroup :products="products"></BtnGroup>
</div>
<br>
<br>
<table class="table table-bordered table-striped table-hover">
<tr>
<td><input type="checkbox" v-on:click="selectAll" name="selectAllBtn" v-model="selectAllState"/></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>
</tr>
</table>
</div>
</template> <script>
/* eslint-disable no-new */
import 'bootstrap/dist/css/bootstrap.min.css'
import BtnGroup from './components/BtnGroup'
export default{
name: 'App',
components: {BtnGroup},
data:function(){
return{
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
},
],
selectAllState:false
/*
注意:这里修正下,页面里的死数据,操作类的直接写好即可,不用遍历数据获取。
只有页面中的展示信息即动态设置
*/
/*
buttons:[
{title:'添加',class:'btn-primary',handler:function(){alert('点击添加按钮')}},
{title:'修改',class:'btn-default',handler:function(){alert('点击修改按钮')}},
{title:'删除',class:'btn-default',handler:function(){
for(let i =0;i<app.data().products.length;i++){
// console.log(app.data().products[i].state)
if(app.data().products[i].state){
app.data().products.splice(i,1);
i--;
}
};
全选按钮状态清空
document.querySelectorAll('input[name="selectAllBtn"]')[0].checked = false;
}}
]
*/
}
},
methods:{
// 用户点击加减数量时调用
cutCount:function(product){
if(product.count>){
product.count--
}else{
alert('商品数量不能小于0')
}
},
addCount:function(product){
product.count++
},
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;//选中样式
this.products[i].state = true;//动态改变值,供删除用
}
} else {
for (var i = ; i < checkObj.length; i++) {
checkObj[i].checked = false;
this.products[i].state = false;
}
}
},
/*添加 */
addHandler:function(){
alert("点击添加按钮")
},
/* 修改 */
changeHandler:function(){
alert("点击修改按钮")
},
/* 删除 */
delateHandler:function(){
for(let i=;i<this.products.length;i++){
if(this.products[i].state){
this.products.splice(i,);
i--;
}
}
/* 注意:vue里尽量避免DOM操作。所有的操作都是数据驱动 */
this.selectAllState = 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;
}
} }
// module.exports = App;
// export default app; </script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Vue+Bootstrap实现购物车程序(3)的更多相关文章
- Vue+Bootstrap实现购物车程序(2)
先简单看下效果图:(在原先基础上添加了删除和筛选操作) 代码: <!DOCTYPE html> <html> <head lang="en"> ...
- 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', ...
随机推荐
- HttpWebRequest以及HttpWebResponse
上次介绍了用WebClient的方式提交POST请求,这次,我继续来介绍用其它一种方式 HttpWebRequest以及HttpWebResponse 自认为与上次介绍的WebClient最大的不同之 ...
- mac系统怎么给文件夹加密?mac文件夹加密教程
mac系统怎么给文件夹加密?目前来说,若想要对你的Mac OS下面的文件进行加密的话有三种方法可以可以做到,第一种方法,Mac自带磁盘工具:第二种方法,例如BatterZip此类Mac压缩解压工具打包 ...
- codeforces 688E E. The Values You Can Make(dp)
题目链接: E. The Values You Can Make time limit per test 2 seconds memory limit per test 256 megabytes i ...
- [Usaco2009 MAR] Earthquake Damage 2
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1585 [算法] 一个最小割的经典模型 , 详见代码 时间复杂度 : O(dinic( ...
- Django Cache缓存系统介绍及Memcached使用
在动态网站中,用户每次请求一个页面,服务器都会执行以下操作:查询数据库,渲染模板,执行业务逻辑,最后生成用户可查看的页面. 这会消耗大量的资源,当访问用户量非常大时,就要考虑这个问题了. 缓存就是为了 ...
- Ruby Numeric类
Numeric类 Numeric ---------> Integer ---------> Fixnum ...
- spoj 371 Boxes【最小费用最大流】
对于ai==0连接(i,t,1,0),对于ai>1(s,i,ai-1,0),然后对以相邻的两个点(i,j)连接(i,j,inf,1),注意这里是一个环的形式,所以1和n+1相连 #include ...
- UVA1437 String painter
传送门 我们先考虑从一个空白串变成\(B\),这样的话用区间dp,区间dp,设\(f[l][r]\)表示区间\((l,r)\)的最小次数,当\(l==r\)时为\(1\),当\(s[l]==s[r]\ ...
- Luogu P2858 [USACO06FEB]奶牛零食Treats for the Cows 【区间dp】By cellur925
题目传送门 做完A Game以后找道区间dp练练手...结果这题没写出来(哭). 和A Game一样的性质,从两边取,但是竟然还有天数,鉴于之前做dp经常在状态中少保存一些东西,所以这次精心设计了状态 ...
- 题解报告:hdu1205吃糖果(插空法)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1205 Problem Description HOHO,终于从Speakless手上赢走了所有的糖果, ...