Vue實現(xiàn)購物車計算總價功能
更新時間：2022年04月14日 17:06:47 作者：coder_wb
這篇文章主要為大家詳細介紹了Vue實現(xiàn)購物車計算總價功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
用Vue實現(xiàn)一個購物車計算總價的功能，供大家參考，具體內(nèi)容如下
代碼
html
<div id="app">
? ? ? ? <div class="panel panel-info">
? ? ? ? ? ? <div class="panel-heading">
? ? ? ? ? ? ? ? <h3 class="panel-title">購物車</h3>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="panel-body">
? ? ? ? ? ? ? ? <div class="checkbox">
? ? ? ? ? ? ? ? ? ? <label>
? ? ? ? ? ? ? ? ? ? ? ? <input type="checkbox" v-model="checkAll">
? ? ? ? ? ? ? ? ? ? ? ? 全選
? ? ? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <ul class="list-group">
? ? ? ? ? ? ? ? ? ? <li class="list-group-item" v-for="(item) in list" :key="item.id">
? ? ? ? ? ? ? ? ? ? ? ? <div class="checkbox">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <label>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <input type="checkbox" v-model="item.checked">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{item.name}}--{{item.price}}*{{item.quantity}}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <button type="button" @click="item.quantity>1?item.quantity-=1:1"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? class="btn btn-success">-</button>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <button type="button" @click="item.quantity+=1" class="btn btn-success">+</button>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? <p>總價：{{sumPrice}}</p>
? ? ? ? ? ? </div>
? ? ? ? </div>
</div>js
<script src="./libs/vue.js"></script>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? el: "#app",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? list: [
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? id: 1,
? ? ? ? ? ? ? ? ? ? ? ? name: "小米10",
? ? ? ? ? ? ? ? ? ? ? ? price: 3999,
? ? ? ? ? ? ? ? ? ? ? ? checked: false,
? ? ? ? ? ? ? ? ? ? ? ? quantity: 1
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? id: 2,
? ? ? ? ? ? ? ? ? ? ? ? name: "榮耀30",
? ? ? ? ? ? ? ? ? ? ? ? price: 2999,
? ? ? ? ? ? ? ? ? ? ? ? checked: false,
? ? ? ? ? ? ? ? ? ? ? ? quantity: 1
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? id: 3,
? ? ? ? ? ? ? ? ? ? ? ? name: "魅族17",
? ? ? ? ? ? ? ? ? ? ? ? price: 3699,
? ? ? ? ? ? ? ? ? ? ? ? checked: false,
? ? ? ? ? ? ? ? ? ? ? ? quantity: 1
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? id: 4,
? ? ? ? ? ? ? ? ? ? ? ? name: "蘋果11",
? ? ? ? ? ? ? ? ? ? ? ? price: 5499,
? ? ? ? ? ? ? ? ? ? ? ? checked: false,
? ? ? ? ? ? ? ? ? ? ? ? quantity: 1
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? },
? ? ? ? ? ? // computed計算屬性，
? ? ? ? ? ? // ?他有一個特點，可以依賴當(dāng)前數(shù)據(jù)改變之后進行重新計算
? ? ? ? ? ? computed: {
? ? ? ? ? ? ? ? checkAll: {
? ? ? ? ? ? ? ? ? ? //設(shè)置值，當(dāng)點擊全選按鈕的時候觸發(fā)
? ? ? ? ? ? ? ? ? ? set(v) {
? ? ? ? ? ? ? ? ? ? ? ? this.list.forEach((item) => (item.checked = v))
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? //取值，當(dāng)列表中的值改變之后觸發(fā)，需要return
? ? ? ? ? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? ? ? ? ? return (
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.list.length ===
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.list.filter((item) => item.checked).length
? ? ? ? ? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //計算總價，選擇被選中的元素
? ? ? ? ? ? ? ? sumPrice() {
? ? ? ? ? ? ? ? ? ? return this.list.filter((item) => item.checked).reduce((pre, cur) => {
? ? ? ? ? ? ? ? ? ? ? ? return pre + cur.price * cur.quantity
? ? ? ? ? ? ? ? ? ? }, 0)
? ? ? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? save() {
? ? ? ? ? ? ? ? ? ? console.log(this.list.filter((item) => item.checked))
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
</script>結(jié)構(gòu)是用bootstrap寫的，記得下載并引入文件
<link rel="stylesheet" href="./bootstrap.min.css" >
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談vue加載優(yōu)化策略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了vue頁面右下角添加懸浮按鈕組件的方法代碼,在Vue項目中,通過在頂層路由文件中添加代碼,可以實現(xiàn)頁面左下角懸浮按鈕的功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue鼠標懸停事件，本文通過示例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
相信大家都知道在element-ui中,el-upload可以進行文件多選操作,下面這篇文章主要給大家介紹了關(guān)于Vue使用el-upload批量上傳圖片時報錯問題的處理方法,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
組合式 API 是一系列 API 的集合，使我們可以使用函數(shù)而不是聲明選項的方式書寫 Vue 組件，這篇文章主要介紹了什么是Vue3的組合式?API,需要的朋友可以參考下2022-06-06
Vue?中?Promise?的then方法異步使用及async/await?異步使用總結(jié)
then?方法是?Promise?中?處理的是異步調(diào)用，異步調(diào)用是非阻塞式的，在調(diào)用的時候并不知道它什么時候結(jié)束，也就不會等到他返回一個有效數(shù)據(jù)之后再進行下一步處理，這篇文章主要介紹了Vue?中?Promise?的then方法異步使用及async/await?異步使用總結(jié),需要的朋友可以參考下2023-01-01
詳解vite2.0配置學(xué)習(xí)(typescript版本)
這篇文章主要介紹了詳解vite2.0配置學(xué)習(xí)(typescript版本)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了vue2路由表中異步加載組件命名方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue2.x配置路由導(dǎo)航守衛(wèi)實現(xiàn)用戶登錄和退出
之前在Vue的學(xué)習(xí)中通過路由導(dǎo)航守衛(wèi)控制實現(xiàn)了用戶登錄模塊的功能，本文基于Vue2.x進行實現(xiàn)，在此將實現(xiàn)過程進行記錄與總結(jié)，感興趣的可以了解一下2021-08-08
Vue3-KeepAlive,多個頁面使用keepalive方式
這篇文章主要介紹了Vue3-KeepAlive，多個頁面使用keepalive方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08