bootstrap+vue.js實現簡單的購物車功能
因為此前做過一段時間Django的後端開發，前端方面的知識一直非常欠缺，總覺得前端的知識太繁雜，無從下手。最近工作比較閒，就研究了一陣子，從最基礎的html、js開始看，這個星期學習了一下vue.js，覺得真是棒極了。這篇是使用bootstrap+vue.js實現的一個簡單的購物車功能。大部分跟著https://segmentfault.com/a/1190000010801357做的，html的部分採用了bootstrap來寫。
準備工作
為什麼選擇vue.js？瞎選的，就像瞎選了Django學一樣，不過我猜想用到最後框架無非是大同小異吧。
首先先來個簡單的。實現膠囊式導航欄顯示切換。
<!DOCTYPE html> - 引入bootstrap和vue，這裡用的都是cdn的方式。
- html中這一段：
<ul class="nav nav-pills" id="test">
<li @click="curId=0" :class="{'active':curId===0}"><a href="#">html</a></li>
<li @click="curId=1" :class="{'active':curId===1}"><a href="#">css</a></li>
<li @click="curId=2" :class="{'active':curId===2}"><a href="#">javascript</a></li>
<li @click="curId=3" :class="{'active':curId===3}"><a href="#">vue</a></li>
</ul>
<div v-show="curId===0">
html<br/>
</div>
<div v-show="curId===1">
css
</div>
<div v-show="curId===2">
javascript
</div>
<div v-show="curId===3">
vue
</div>- class=”nav nav-pills”就是bootstrap中的膠囊式導航欄；
- @click=”curId=0”，@click是v-on:click的縮寫形式，這句話的作用呢就是click到這個元素的時候把curId設為0；
- :class是v-bind:class的縮寫形式，這句話就是說當curId==0的時候給這個元素加一個class:active（導航的這個元素被選中的效果）。
- v-show=”curId===0”，v-show根據表示式之真假值，切換元素的 display CSS 屬性，當我們click到某個元素時，curId的值發生變化，同時繫結class=”active”，div中相應id的段落display。
<script>
new Vue({
el: '#container',
data: {
curId: 0
},
computed: {},
methods: {},
mounted: function () {
}
})
</script>js程式碼中el表明作用的範圍，data我的理解就是傳到這個範圍內的DOM裡的資料。
購物車功能實現
首先先放出程式碼試執行一下，基本的功能包括：
1. 全選（手動選上全部checkbox時，全選框也被勾上）
2. 實時顯示所有被選商品數和總價
3. 刪除某條記錄
4. 刪除所有記錄
可以想一下這些功能大概需要怎麼樣去記錄。比如全選應該需要維持一個變數記錄是不是所有的商品被選上，也應該有個方法遍歷所有記錄全部選中；比如刪除某條記錄應該有個方法接受記錄的id並進行記錄刪除。放上程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>購物車</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div class="container">
<div id="shopping-cart">
<h4 class="cart-title">購物清單</h4>
<table class="table table-hover">
<thead>
<tr>
<th>
<div class="checkbox">
<label>
<input type="checkbox" @click="selectAll(isSelectAll)" v-bind:checked="isSelectAll"> 全選
</label>
</div>
</th>
<th>商品</th>
<th>數量</th>
<th>單價</th>
<th>金額（元）</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in productList">
<td>
<label>
<input type="checkbox" @click="item.select=!item.select;console.log(item.select)" v-bind:checked="item.select">
</label>
</td>
<td>{{item.name}}</td>
<td>
<div class="product-num" style="border: 1px solid #e3e3e3;
display: inline-block;
text-align: center;">
<a href="javascript:;" @click="item.num>0?item.num--:0">-</a>
<input type="text" class="num-input" v-model="item.num" style="width: 42px;
height: 28px;
line-height: 28px;
border: none;
text-align: center;">
<a href="javascript:;" @click="item.num++">+</a>
</div>
</td>
<td>{{item.price}}</td>
<td>{{item.price*item.num}}</td>
<td><a href="javascript:;" @click="deleteProduct(index)">刪除</a></td>
</tr>
</tbody>
</table>
<div class="col-sm-2">
<span class="glyphicon glyphicon-trash"></span>
<label><a href="javascript:;" @click="deleteSelectedProduct">刪除所選商品</a></label>
</div>
<div class="col-sm-2">
<span class="glyphicon glyphicon-shopping-cart"></span> 繼續購物
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-2">
<span>{{getTotal.totalNum}}</span>件商品總計（不含運費）：￥<span>{{getTotal.totalPrice}}</span>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-primary">去結算</button>
</div>
</div>
</div>
</body>
<script>
new Vue({
el:'#shopping-cart',
data:{
productList:[
{
'name': 'iphone8',//產品名稱
'num': 3,//數量
'price': 4999//單價
},
{
'name': '小米6',//產品名稱
'num': 3,//數量
'price': 2999//單價
},
{
'name': 'samsung',//產品名稱
'num': 1,//數量
'price': 4550//單價
}
],
},
computed: {
isSelectAll:function(){
return this.productList.every(function (val) { return val.select});
},
getTotal:function(){
var list = this.productList.filter(function (item) {return item.select});
var totalPrice = 0;
var totalNum = 0;
for(var i=0,len=list.length;i<len;i++){
totalNum += list[i].num;
totalPrice += list[i].num*list[i].price;
}
return {totalNum:totalNum, totalPrice:totalPrice};
}
},
methods:{
selectAll:function(_isSelect){
for (var i = 0, len = this.productList.length; i < len; i++) {
this.productList[i].select = !_isSelect;
}
},
deleteProduct:function(index){
this.productList.splice(index,1);
},
deleteSelectedProduct:function(){
this.productList=this.productList.filter(function (item) {return !item.select});
}
},
mounted:function () {
var _this=this;
//為productList新增select（是否選中）欄位，初始值為true
this.productList.map(function (item) {
_this.$set(item, 'select', false);
})
}
})
</script>
</html>
<input type="checkbox" @click="selectAll(isSelectAll)" v-bind:checked="isSelectAll">看一下全選的實現方法，和一開始的設計想法一致，click繫結一個方法，checked屬性也繫結一個變數。值得說一下這裡的isSelectAll是一個計算屬性，計算屬性是快取的，基於它們的依賴進行快取，只有在它的相關依賴發生改變時才會重新求值。也就是說只有在你改變了某一個記錄的選中狀態後才會重新計算isSelectAll，在此之前訪問會立刻返回上一次的計算結果。<tr v-for="(item,index) in productList">，v-for基於源資料多次渲染元素或模板塊，這裡帶索引是為了後面刪除某條記錄時方便傳入id；<a href="javascript:;" @click="item.num>0?item.num--:0">-</a>注意這裡的細節，數量是不能減成負數的；- input由於綁定了v-model=”item.num”，vue其實在其中幫我們做了很多的事情，比如總金額這裡{{item.price*item.num}}，由於也是item.num渲染的，所以不需要我們做什麼，自動計算單件商品的總金額功能已經實現了。
- 還有一點資料方面需要注意的，因為後端傳來的資料肯定不會包含是不是被選中的，這是一個前端資料，但是也需要跟隨每一條記錄，所以使用了生命週期鉤子mounted，關於這個，官方文件是這樣寫的：el 被新建立的 vm.$el 替換，並掛載到例項上去之後呼叫該鉤子，其實我不是特別明白，大概理解就是mounted之後就做的事情吧。。。
初步學習了一下vue.js，覺得甚是神奇。
相關推薦
bootstrap+vue.js實現簡單的購物車功能
因為此前做過一段時間Django的後端開發，前端方面的知識一直非常欠缺，總覺得前端的知識太繁雜，無從下手。最近工作比較閒，就研究了一陣子，從最基礎的html、js開始看，這個星期學習了一下vue.js，覺得真是棒極了。這篇是使用bootstrap+vue.js實
vue.js實現簡單的購物車功能
咳咳，第一次寫部落格，有點小緊張，這次我將給大家帶來一個vue.js實現購物車的小專案，如有不足請嚴厲指出。 購物車功能有：全選和選擇部分商品，選中商品總價計算，商品移除，以及調整購買數量等功能。 js主要有以下方法 加函式，減函式，手動修改數量判斷庫存函式，總價格
JS 實現簡單計算器功能
// if(symbol != null){ console.log(aNum, bNum); getResult(symbol, aNum, bNum); show.innerHTML = result;
vue.js實現撥打電話功能
<div class="bottom" v-if="name!=''"> 您的專屬顧問：<br>
JS實現簡單loading功能頁面
<html> <head> <title>正在載入...</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
實現簡單購物車功能
說明：選擇需要購買的物品，計算總價。 <!DOCTYPE html> <html> <head></body> <link href="sohud
Python Django實現簡單購物車功能
Django版本：1.11 作業系統：Windows Python：3.5 歡迎加入學習交流QQ群：657341423 這裡以淘寶為例 這是一個商品的詳情，這裡有2個按鈕功能，一個是立即購買，一個加入購物車，兩者都是生成一個訂單，但兩者實現的方法是不相同的
VUE.JS實現購物車功能
add http 功能 hang 總數 tps conf methods htm 購物車是電商必備的功能，可以讓用戶一次性購買多個商品，常見的購物車實現方式有如下幾種： 1. 用戶更新購物車裏的商品後，頁面自動刷新。 2. 使用局部刷新功能，服務器端返回整個購物
使用vue.js實現checkbox的全選和多個的刪除功能
ons eth table padding ted rip fun lpad let 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
通過 JS 實現簡單的拖拽功能並且可以在特定元素上禁止拖拽
如何 alt targe 但是 mes 並且 mod closed demo 前言 關於講解 JS 的拖拽功能的文章數不勝數，我確實沒有必要大費周章再寫一篇重復的文章來吸引眼球。本文的重點是講解如何在某些特定的元素上禁止拖拽。這是我在編寫插件時遇到的問題，其實很多插件的拖
vue.js實現頁面倒計時跳轉功能
his 首頁 turn return () data col world mit 需求分析： 頁面倒計時5秒後進入系統主頁，數字需要實時更新！ <template> <div class=""> <h1>歡迎來到Vue.js
Vue js中簡單的搜尋功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://
練習：vue.js實現購物車+表單驗證
購物車 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>購物車</title> <script src="../js/vue.js">
vue實現簡單購物車
效果圖如下 比較醜哈哈。。 程式碼如下 <template> <div class="user"> <div><input type="checkbox" v-model="checkAll" @click="ch
flex佈局+vue.js實現的一個投骰子的功能
1、直接貼程式碼吧。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src
實用小專案——Vue.js 實現增刪查改功能
最近學習了vue.js框架，嘗試著做了一個增刪查改功能的小專案。 今天發博來跟大家交流交流經驗。整體效果如下動態圖： 首先，我使用的是Bootstrap搭建整體框架： <!DOCTYPE html> <html> <head&g
Vue.js實現多條件篩選、搜尋、排序及分頁的表格功能
與上篇實踐教程一樣，在這篇文章中，我將繼續從一種常見的功能——表格入手，展示Vue.js中的一些優雅特性。同時也將對filter功能與computed屬性進行對比，說明各自的適用場景，也為vue2.0版本中即將刪除的部分filter功能做準備。 需求分析 還是先從需求入手，想想實現這樣一個功能需要注意
用Vue.js實現全選與全不選刪除功能
這是實現全選與全不選邏輯的程式碼，大家只要給相應的控制元件再加上刪除邏輯就完成了全選與選不選、單選等刪除功能了；這段程式碼經過我很多次強暴，是可以用的。 <template> <div id="hello"> <ol>
【轉載】vue.js實現格式化時間並每秒更新顯示功能示例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user
Vue.js實現一個todo-list的上移，下移，刪除功能
如圖，A simple todo-list長這樣 這是一個基於vue.js的一個簡單的todo-list小demo。首先要實現新增非空list，點選list切換finished狀態這樣的一個效果，推薦學習地址---->點選開啟連結 接下來是實現的一個上移，下移，刪除