Vue實現(xiàn)購物車計算總價功能
更新時間：2022年04月14日 17:06:47 作者：coder_wb
這篇文章主要為大家詳細介紹了Vue實現(xiàn)購物車計算總價功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
用Vue實現(xiàn)一個購物車計算總價的功能，供大家參考，具體內容如下
代碼
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計算屬性，
? ? ? ? ? ? // ?他有一個特點，可以依賴當前數(shù)據(jù)改變之后進行重新計算
? ? ? ? ? ? computed: {
? ? ? ? ? ? ? ? checkAll: {
? ? ? ? ? ? ? ? ? ? //設置值，當點擊全選按鈕的時候觸發(fā)
? ? ? ? ? ? ? ? ? ? set(v) {
? ? ? ? ? ? ? ? ? ? ? ? this.list.forEach((item) => (item.checked = v))
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? //取值，當列表中的值改變之后觸發(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>結構是用bootstrap寫的，記得下載并引入文件
<link rel="stylesheet" href="./bootstrap.min.css" >
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了Vue的核心原理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
對話框是很常用的組件,在很多地方都會用到,下面這篇文章主要給大家介紹了關于vue3動態(tài)加載對話框的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要為大家介紹了Vue中request.js封裝及調用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要介紹了vue如何使用文件流進行下載(new Blob)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
elementUI中有日期范圍組件,月份范圍選擇的,就是沒有年份范圍選擇的,需要加一個類似風格的,下面這篇文章主要給大家介紹了關于ElementUI年份范圍選擇器功能實現(xiàn)的相關資料,需要的朋友可以參考下2023-02-02
vuex中store存儲store.commit和store.dispatch的區(qū)別及說明
這篇文章主要介紹了vuex中store存儲store.commit和store.dispatch的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
VUE3使用Element-Plus時如何修改ElMessage中的文字大小
在使用Element-plus的Elmessage時使用默認的size無法滿足我們的需求時,我們可以自定義字體的大小,但是直接重寫樣式后,并沒有起作用,甚至使用::v-deep深度選擇器也沒有效果,本文介紹VUE3使用Element-Plus時如何修改ElMessage中的文字大小,感興趣的朋友一起看看吧2023-09-09
vue轉electron項目及解決使用fs報錯:Module?not?found:?Error:?Can&apo
這篇文章主要給大家介紹了關于vue轉electron項目及解決使用fs報錯:Module?not?found:?Error:?Can‘t?resolve?‘fs‘?in的相關資料,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
基于Vue的SPA動態(tài)修改頁面title的方法(推薦)
這篇文章主要介紹了基于Vue的SPA動態(tài)修改頁面title的方法,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了vue監(jiān)聽路由變化的幾種方式小結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05