簡單小例子，BOOTSTRAP+VUE實現購物車功能。

阿新 • • 發佈：2019-02-15

看了vue的helloworld，試手做了個小例子。歡迎大家討論！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="uft-8">
		<title>shopCar</title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
		integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<script src="https://cdn.jsdelivr.net/npm/ 
[email protected]/dist/vue.js"></script>
		<style>
			*{margin:0;padding: 0;border:0;}
			body{background: #eee;}
			table{background: #fff;text-align: center;}
			table img{width:40px;height:40px;}
			table i{font-style: normal;color:red;padding:0 5px;}
			table td *{vertical-align: middle;}
			table th{text-align: center;}
			.glyphicon{cursor: pointer;}
			.red{color:red;}
			.fx{text-decoration: underline;cursor: pointer;}
		</style>
	</head>
	<body>
		<div class="container" id="shopCar">
			<h1>購物清單</h1>
			<table class="table">
				<tr>
					<!-- .glyphicon .glyphicon-ok-circle -->
					<th>
						<label>
							全選
							<span class="glyphicon glyphicon-unchecked" @click="selectAll" v-show="!saremark" /></span>
							<span class="glyphicon glyphicon-ok-circle" @click="selectAll" v-show="saremark" /></span>
						</label>/
						<label for="" class="fx" @click="selectInverse">
							反選
						</label>
					</th>
					<th>商品</th>
					<th>數量</th>
					<th>單價</th>
					<th>金額</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,itemIndex) in goodLists">
					<td>
						<span class="glyphicon glyphicon-unchecked" @click="selectItem(itemIndex)" v-show="!item.isSelect" /></span>
						<span class="glyphicon glyphicon-ok-circle" @click="selectItem(itemIndex)" v-show="item.isSelect" /></span>
					</td>
					<td v-text="item.goods"></td>
					<td>
						<span class="btn-group btn-group-sm">
						    <button type="button" class="btn btn-default" @click="addNumbers(item.numbers,itemIndex)" >+</button>
						    <button type="button" class="btn btn-default">{{item.numbers}}</button>
						    <button type="button" class="btn btn-default" @click="minusNumbers(item.numbers,itemIndex)">-</button>
						</span>
					</td>
					<td class="red" v-text="item.price"></td>
					<td class="red" v-text="item.price * item.numbers"></td>
					<td><a href="javascript:;" class="delete" @click="deleteItem(itemIndex)">刪除</a></td>
				</tr>
				<tr>
					<td><a href="javascript:;" class="glyphicon glyphicon-trash" @click="deleteChecked">刪除</a></td>
					<td class="text-right" colspan="5">
						<span class="glyphicon glyphicon-shopping-cart">:</span>
						<i>{{nTotal}}</i>件商品共計：<i class="glyphicon glyphicon-usd">{{pTotal}}</i>
						<button type="button" class="btn btn-danger">去結算</button></td>
				</tr>
			</table>
		</div>
		<script>
			var goodList = [
				{isSelect:false,goods:"0牛奶",numbers:"1",price:'5',total:'0'},
				{isSelect:false,goods:"1豆腐",numbers:"1",price:'10',total:'0'},
				{isSelect:false,goods:"2滷蛋",numbers:"1",price:'3',total:'0'},
				{isSelect:false,goods:"3餅乾",numbers:"1",price:'4',total:'0'},
				{isSelect:false,goods:"4糖果",numbers:"1",price:'1',total:'0'}
			];
			var shopCar = new Vue({
				el:"#shopCar",
				data:{
					goodLists:goodList,  //商品列表
					saremark:false,  //全選按鈕判斷
					nTotal:0,  //總個數
					pTotal:0,  //總價格
					checked:[]  //記錄哪些item被選中
				},
				watch:{
					goodLists:{
						handler:function(val, oldVal){  //深度監聽goodLists，修改總個數及總價格
							var _this = this,nTotal = 0,pTotal = 0,checked = [],isSelectAll = true;
							_this.goodLists.map(function(i){
								if(i.isSelect){  //計算選中的總個數和總價格,選中狀態
									nTotal += parseInt(i.numbers);
									pTotal += parseInt(i.price) * parseInt(i.numbers);
								}else{
									isSelectAll = false;
									checked.push(i);  //非選中項存入checked陣列，deleteChecked方法使用
								}
				            });
				            _this.nTotal = nTotal;
				            _this.pTotal = pTotal;
				            _this.checked = checked;
				            _this.saremark = isSelectAll ? true : false;
				            if(this.goodLists.length == 0){
				            	_this.saremark = false;
				            }
						},
						deep:true
					}
				},
				methods:{
					selectAll:function(){  //全選
						var _this = this;
						_this.saremark = !_this.saremark;
						goodList.forEach(function(v,i){
							v.isSelect = _this.saremark;
						});
					},
					selectInverse:function(){  //反選
						var _this = this;
						_this.goodLists.forEach(function(v,i){
							v.isSelect = !v.isSelect;
						});
					},
					selectItem:function(i){  //選擇當前行
						this.saremark = false;
						this.goodLists[i].isSelect = !this.goodLists[i].isSelect;
					},
					addNumbers:function(n,i){  //增加數量
						n++;
						Vue.set(this.goodLists[i],"numbers",n);
					},
					minusNumbers:function(n,i){  //減少數量
						n = n <= 0 ? 0 : n - 1;
						Vue.set(this.goodLists[i],"numbers",n);
					},
					deleteItem:function(i){  //刪除當前行
						this.goodLists.splice(i,1);
					},
					deleteChecked:function(){  //刪除選中的item
						if(this.checked.length == 0 && this.saremark){
							this.goodLists = this.checked;
						}else if(this.checked.length != 0){
							this.goodLists = this.checked;
						}
					}
				}
			});
		</script>
	</body>
</html>

簡單小例子，BOOTSTRAP+VUE實現購物車功能。

看了vue的helloworld，試手做了個小例子。歡迎大家討論！<!DOCTYPE html> <html> <head> <meta charset="uft-8"> <title>shopCar<

Vue實現購物車功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>

vue商品分類，實現購物車功能

new Vue({ el: "#app", data: { cIndex: 0, lists: [ { title: "推薦商品", goods: [

簡單的實現購物車功能，還有不到位的地方，加油！！！

要求： 1 import time 2 goods = [{"huawei":1000},{"apple":10},{"banana":23},{"pen":140},{"wanju":78}, 3 {"book":200},{"taiden

簡單java反射，小例子，僅供參考

package test; public class c { public String cc(String name,String addr){ return "My name is "+nam

mxnet(gluon) 實現DQN簡單小例子

參考文獻關於增強學習的基本知識可以參考第二個連結，講的挺有意思的。DQN的東西可以看第一個連結相關視訊。課程中實現了Tensorflow和pytorch的示例程式碼。本文主要是改寫成了gluon實現Q-learning的演算法流程DQN的演算法流程對於DQN的理解：增強學習中需要學習的東西是Q-table，決

java多執行緒簡單小例子2——實現Runnable介面

/** * 實現Runnable介面的類 * * @author */ public class DoSomething implements Runnable { private St

Vue.js入門簡單小例子

因原文中的Vue.js版本與現在較新的版本語法有些許不同，我只是將原文的程式碼稍作改動，符合2.2.2及以上版本的語法，在此記錄方便自己回顧溫習。廢話不多說，直接上程式碼： <!DOCTYPE html> <html> <head&g

java中用jquery AutoComplete 實現自動補全(一)簡單小例子

java中用jquery AutoComplete 實現自動補全(一) 最近要做一個搜尋功能

VUE.JS實現購物車功能

add http 功能 hang 總數 tps conf methods htm 購物車是電商必備的功能，可以讓用戶一次性購買多個商品，常見的購物車實現方式有如下幾種： 1. 用戶更新購物車裏的商品後，頁面自動刷新。 2. 使用局部刷新功能，服務器端返回整個購物

簡單分頁，無需外掛實現上一頁|下一頁分頁功能

分頁功能五花八門,外掛的使用也很方便。最近做專案,分頁功能是寫好的了，利用bootstarp 簡單實現的, 類似於這種但由於資料越來越多,這種迴圈的方式很不好看。於是想到上一頁| 下一頁分頁的樣式,看到網上使用外掛,但是表單都是拼的,由於和自己程式碼出入

一個簡單的例子，帶你理解haproxy！

如果你對haproxy啥都不懂，這篇文章將對你有很大的幫助。大神請繞行！ haproxy是一個性能不輸於nginx的工具。和nginx功能類似，可以實現負載均衡。他與nginx不同的是，haproxy既可以實現基於http的七層架構，又可以實現基於tcp/udp的四層架構。 [[email&

在做商城專案實現購物車功能的時候除了個小bug...

@Autowired private ItemService itemService; @Value("${COOKIE_CART_EXPIRE}") private int COOKIE_CART_EXPIRE; @Autowired private Cart

vue 實現購物車

<template> <div> <div class="shopcart"> <div class="content"> <div class="content-left" @click="

Retrofit2 學習總結（二）Rxjava +Retrofit +java web伺服器簡單小例子

通過一段時間的學習，Rxjava Retrofit2終於算是入了門，學習的過程中寫了個簡單的小例子，像我這樣的人學習東西還是喜歡有一個正確的例子用來學習的。本demo已經上傳到了gitHup： java伺服器：https://github.com/tanglonghui/Retrofit

設計模式簡單小例子（三）行為型模式

終於，把設計模式小例子敲完了..... 原始碼已經上傳到了GitHub. https://github.com/tanglonghui/DesignPatterns 設計模式簡單小例子（一）建立型模式： https://blog.csdn.net/qq_40687864/artic

設計模式簡單小例子（二）結構型模式

簡單小例子原始碼已經上傳到了GitHub. https://github.com/tanglonghui/DesignPatterns 設計模式簡單小例子（一）建立型模式： https://blog.csdn.net/qq_40687864/article/details/810

反射獲取建構函式引數，列舉小例子，常量池

getConstructor(String.class,int.class)中的引數是怎麼確定？為什麼就是String.class和int.class，引數型別為什麼又寫成(String.class,int.class)這種形式的呢？知道是通過getConstructor方

React Native基礎&入門教程：以一個To Do List小例子，看props和state

本文由葡萄城技術團隊於部落格園原創並首發轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。在上篇中，我們介紹了什麼是Flexbox佈局，以及如何使用Flexbox佈局。還沒有看過的小夥伴歡迎回到文章列表點選檢視之前的文章瞭解。那麼，當我們有了基本

matlab bp神經網路的簡單小例子

因為要寫論文做實驗，所以自己研究了一些關於神經網路的演算法，用matlab做的一些小測試，使用的是《matlab神經網路43個案例分析》這本書，感覺還不錯，分享一下。使用每行的前4個數據預測第5個數據的值。資源地址 http://download.csdn.net

簡單小例子，BOOTSTRAP+VUE實現購物車功能。

相關推薦