購物車是一個商城程式的典型功能模組，之前使用jquery製作過，也使用angular開發過，今天將使用Vue實現購物車效果，使用的主要技術有vue+axios+mockJS等。

購物車的主要功能如下：

1. 勾選全選，所有商品全部選中。在取消全選框的時候所有商品取消選擇。

2. 點選單個商品上的加號減號進行數量的增加和減少，右邊小計實時計算出這個商品的價格合計。

3. 點選單個商品上的刪除按鈕將商品從購物車中刪除。

4. 底部已選實時顯示已經勾選的商品，右邊合計金額實時顯示所有勾選的商品的小計之和。

購物車的實現效果如圖所示：

1、 HTML頁面佈局和css樣式

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

table{

border-collapse:collapse;

float: left;

border:1px solid #999;

}

#btn{

background:#999;

color: #fff;

}

#shop{

list-style: none;

}

#shop li{

width: 400px;

height:150px;

border:1px solid #999;

}

#shop .p{

width:200px;

height:30px;

background:gray;

color: #fff;

text-align: center;

line-height:30px;

}

#shop .p1{

color:orange;

float: left;

}

#shop .p2{

color: #999;

float: left;

margin-left:10px;

}

#shop .p3{

clear: both;

}

</style>

</head>

<body>

<div id="app">

<ul id="shop">

<li v-for="item,index in plist" :key="item.id" id="li">

<p>{{item.title}}</p>

<p>¥{{item.sprice}}</p>

<p><del>¥{{item.price}}</del></p>

<p>

<span v-if="nums[item.id]">

<button @click="sub(item)">-</button>

{{nums[item.id]}}

</span>

<button @click="add(item)">+</button>

</p>

</li>

</ul>

<template v-if="car.length">

<table border="1px">

<tr v-for="item,index in car">

<td>{{item.title}}</td>

<td>

¥{{item.sprice}}

<del>¥{{item.price}}</del>

</td>

<td>

<button @click="carsub(index,item.id)">-</button>

{{nums[item.id]}}

<button @click="caradd(index,item.id,item.store)">+</button>

</td>

</tr>

</table>

<button @click="empty" id="btn">清空購物車</button>

總計:<b>¥{{itotal}}</b>

</template>

</div>

</body>

</html>

二、建立一個Vue物件，設定購物車資料屬性

var vm = new Vue({

el:"#app",

data:{

plist:[],//存放列表資料

car:[],

nums:{},

buyed:[]

}

});

三、假設從後臺請求到資料，然後賦值到Vue物件中

後臺資料由mockjs模擬，使用axios發起請求獲取資料

3.1 安裝axios

npm install axios

3.2 請求url地址

var baseurl="http://axiostest.itsource.cn";

3.3 發起請求獲取資料

created:function(){

var th = this;

相關推薦

前端技術：vue+axios+mockJS實現購物車效果

購物車是一個商城程式的典型功能模組，之前使用jquery製作過，也使用angular開發過，今天將使用Vue實現購物車效果，使用的主要技術有vue+axios+mockJS等。購物車的主要功能如下： 1. 勾選全選，所有商品全部選中。在取消全選框的時候所有商品取消選擇。 2. 點選單個商品上的加號

Vue.js學習（五）：vue+axios+php+mysql 實現前端介面資料動態更新

網上參考了很多例子，都沒有關於vue+php實現前後端的例子，後來自己總結了一個，希望大家批評指正。 vue實現動態資料的方式主要有vue-resource和axios，但是從Vue2.0開始，已經不

利用Vue.js2.0實現購物車和地址選配功能

根據慕課網-利用Vue2.0實現購物車和地址選配功能教程，通過利用Vue2.0來實現電商平臺的簡單功能。 vue中的$http請求服務. 通過呼叫http服務，對.json檔案傳送http請求，通過遍歷陣列資料完成頁面渲染引入vue-reso

vue.js如何實現購物車加減操作

vue.js如何實現購物車加減操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt

JWT實戰：使用axios+PHP實現登入認證

《有關JWT(Json Web Token)的那些事https://www.helloweba.net/news/520.html》文中介紹了什麼是JWT（Json Web Token），今天我們來結合例項給大家講述JWT的實戰應用，就是如何使用前端Axios與後端PHP實現

前端面試：js的繼承實現

前言 JS作為面向物件的弱型別語言，繼承也是其非常強大的特性之一。那麼如何在JS中實現繼承呢？讓我們拭目以待。 JS繼承的實現方式既然要實現繼承，那麼首先我們得有一個父類，程式碼如下： // 定義一個動物類 function Animal (name) { // 屬性 this.name =

js代碼實現購物車效果

todo ssa lse custom () 分享 sel map 失敗頁面分上下兩部分，上部分是所有的數據，下部分是購物車。通過在上面選擇需要處理的數據添加進到購物車，實現對購物車數據的統一處理。需要註意的有兩點：①購物車數據可刪除，且不能重復添加 ②響應時間考慮，

egret 示例實戰六：延遲操作，實現打字效果

for size 文本方法分享圖片 vat con code 哈哈 1.建立TextField對象 1 /**建立文本對象 */ 2 this.txt = new egret.TextField(); 3 this.txt.siz

Codrops 優秀教程：CSS 3D Transforms 實現書本效果

　　這個使用 CSS 3D Transforms 實現創意書本效果的來自 Codrops 網站。你可以看到兩種型別的書設計：精裝書和平裝書。這兩個效果都可以很容易地使用 CSS 修改。趕緊體驗一下吧。您可能感興趣的相關文章原始碼下載　　效果演示

Vue爬坑之路二：使用Muse-UI前端框架及axios，實現簡單登入頁

一：安裝UI元件 Muse UI 基於 Vue2.0 開發，Vue2.0是當下最快的前端框架之一，小巧，api友好，可用於開發的複雜單頁應用，安裝的方式有很多種，官方推薦的是使用npm輔助安裝：在專案的根目錄中開啟命令提示符輸入： npm

vue+axios 前端實現登錄攔截（路由攔截、http攔截）

itl sta outer gin get alt aud 利用業務一、路由攔截登錄攔截邏輯第一步：路由攔截首先在定義路由的時候就需要多添加一個自定義字段requireAuth，用於判斷該路由的訪問是否需要登錄。如果用戶已經登錄，則順利進入路由，否則就進入登錄頁

練習：vue.js實現購物車+表單驗證

購物車 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>購物車</title> <script src="../js/vue.js">

【vue+axios】前端實現登入攔截

登入及攔截、登出、token失效的攔截及對應 axios 攔截器的使用（點選檢視原文）登入攔截邏輯第一步：路由攔截首先在定義路由的時候就需要多新增一個自定義欄位requireAuth，用於判斷該路由的訪問是否需要登入。如果使用者已經登入，則順

Spring技術內幕：Spring AOP的實現原理（三）

dede ide configure ida mini == src min dem 生成SingleTon代理對象在getSingleTonInstance方法中完畢，這種方法時ProxyFactoryBean生成AopProxy對象的入口。代理對象會

python（4）- 簡單練習：python實現購物車的優化

list x11 int 退出 .html htm src keyword 結算簡單版本，鏈接如下： http://www.cnblogs.com/c-x-m/p/7819220.html 購物車程序優化題目要求： 1. 用戶退出時打印商品列表時，按以下格式

Vue--axios：vue中的ajax異步請求（發送和請求數據）

lan his src 操作 ajax請求 itl func gin 出錯一.使用axios發送get請求 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <me

VUE.JS實現購物車功能

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

vue+axios實現文件下載

lob wid 文件流 post請求童鞋 inf api 文件 download 功能：點擊導出按鈕，提交請求，下載excel文件；第一步：跟後端童鞋確認交付的接口的response header設置了以及返回了文件流。第二步：修改axios請求的resp

用Vue來實現音樂播放器（十六）：滾動列表的實現

com 作用 efault nor 大小 -s stylus BE ack 滾動列表是一個基礎組件他是基於scroll組件實現的在base文件夾下面創建一個list-view文件夾裏面有list-view.vue組件 <template>

主流前端框架對比：Vue.js , React, Angular.js

.cn angular nbsp 入門 react 如果 blog reac 示例個人認為Vue.js的文檔最懇切。我認為結合文檔和遇到問題Google答案的匹配度來講：Vue.js > ReactJS > AngularJS > Angular 2