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', ...
随机推荐
- openwrt 设置samba服务器与pc共享文件
1,安装samba36-server和luci-app-samba opkg install samba36-server luci-app-samba Openwrt的samba配置是先读取/etc ...
- Java Socket线程的设计原理介绍
转自:http://developer.51cto.com/art/201003/190001.htm Java Socket线程我们经常会用到的技术,但是有很多程序员还是有不少的使用问题,下面我们就 ...
- 数据库无法访问，用户 NT AUTHORITY/SYSTEM或NT AUTHORITY\NETWORK SERVICE登录失败的解决办法
问题:win7中的在IIS 7.0中,在 Default Web Site 目录下挂一虚拟目录. 在相应的应用程序池 DefaultAppPool 设置标识设置成NetworkService. 但是打 ...
- Ubuntu 安装MTP驱动访问安卓设备（转载）
转自:http://www.ipython.me/ubuntu/how-to-connect-kindle-with-ubuntu.html 1.安装MTP工具集: mr_liu@i-it:~$ su ...
- bzoj 4078: [Wf2014]Metal Processing Plant【二分+2-SAT+枚举+并查集】
枚举从大到小s1,二分s2(越大越有可能符合),2-SAT判断,ans取min 思路倒是挺简单的,就是二分的时候出了比较诡异的问题,只能二分s2的值,不能在数组上二分... 有个优化,就是当不是二分图 ...
- 设置Google搜索在新的标签页打开
Google搜索的结果,默认情况下点击进入是在本标签页打开的,这样就很麻烦, 可以在搜索结果的页面中进行设置,让它在新的标签页显示 搜索结果设置->搜索设置->新的标签页打开
- Docker的基础知识与安装（Ubantu CentOS）
Docker是一种允许特殊类型虚拟化的实用程序.Docker允许使用Docker镜像在系统上“虚拟”运行程序.可以下载或创建可以运行的图像.一旦加载并执行了图像,它现在就是一个容器.容器已为容器内的程 ...
- 《Windows核心编程系列》十谈谈同步设备IO与异步设备IO之异步IO
同步设备IO与异步设备IO之异步IO介绍 设备IO与cpu速度甚至是内存访问相比较都是比较慢的,而且更不可预测.虽然如此,通过使用异步设备IO我们仍然能够创造出更高效的程序. 同步IO时,发出IO请求 ...
- EditextText输入类型
android:inputType="none"--输入普通字符 android:inputType="text"--输入普通字符 android:inputT ...
- [ZOJ1610]Count the Colors
Description 画一些颜色段在一行上,一些较早的颜色就会被后来的颜色覆盖了. 你的任务就是要数出你随后能看到的不同颜色的段的数目. Input 每组测试数据第一行只有一个整数n, 1 < ...