vue.js購物車添加商品組件的方法
現(xiàn)實(shí)向購物車添加商品組件
代碼
<template> <div class="cartcontrol"> <!--商品減一區(qū)域--> <div class="reduce" v-show="food.count>0"> <i class="icon-remove_circle_outline"></i> </div> <!--商品數(shù)量區(qū)域--> <div class="num" v-show="food.count>0">4</div> <!--商品加一區(qū)域--> <div class="add" @click="addCart"> <i class="icon-add_circle"></i> </div> </div> </template>
<script> export default { name: "Cartcontrol", props:{ food:{ type:Object } }, methods:{ //添加購物車商品數(shù)量 addCart(ele){ if(!ele._constructed){ //better-scroll的派發(fā)事件scroll的event和pc端瀏覽器的點(diǎn)擊事件的event有個 // 屬性區(qū)別_constructed,pc端瀏覽器的點(diǎn)擊事件的event中是沒有這個屬性的 return; } //一開始food中是沒有商品數(shù)量count if(!this.food.count){ // this.food.count = 1;count不是food對象中的屬性,直接這樣寫,在dom渲染的時候是無法感應(yīng)到count的變化 this.$set(this.food,'count',1); }else{ this.food.count++; } console.log(this.food.count); } } } </script>
<style scoped lang="stylus"> .cartcontrol display flex height .48rem align-items center .num font-size.2rem width .48rem text-align center color rgb(147,153,159) .reduce,.add font-size .4rem color rgb(0,160,220) </style>
對象中添加新的屬性,如果更新此屬性的值,是不會更新視圖的
addCart(ele){ if(!ele._constructed){ //better-scroll的派發(fā)事件scroll的event和pc端瀏覽器的點(diǎn)擊事件的event有個 // 屬性區(qū)別_constructed,pc端瀏覽器的點(diǎn)擊事件的event中是沒有這個屬性的 return; } //一開始food中是沒有商品數(shù)量count if(!this.food.count){ this.food.count = 1;count不是food對象中的屬性,直接向food添加新屬性count, // 當(dāng)count值發(fā)生變化的時候在dom渲染的時候是無法感應(yīng)到count的變化 }else{ this.food.count++; } console.log(this.food.count); }
解決方法:使用$set可以觸發(fā)更新視圖,這樣當(dāng)count發(fā)生變化的時候,$set去觸發(fā)更新視圖 addCart(ele){
if(!ele._constructed){ //better-scroll的派發(fā)事件scroll的event和pc端瀏覽器的點(diǎn)擊事件的event有個 // 屬性區(qū)別_constructed,pc端瀏覽器的點(diǎn)擊事件的event中是沒有這個屬性的 return; } //一開始food中是沒有商品數(shù)量count if(!this.food.count){ // this.food.count = 1;count不是food對象中的屬性,直接向food添加新屬性count, // 當(dāng)count值發(fā)生變化的時候在dom渲染的時候是無法感應(yīng)到count的變化 this.$set(this.food,'count',1); }else{ this.food.count++; } console.log(this.food.count); }
總結(jié)
以上所述是小編給大家介紹的vue.js購物車添加商品組件的實(shí)例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
- vue實(shí)現(xiàn)購物車功能(商品分類)
- Vue+Node實(shí)現(xiàn)商品列表的分頁、排序、篩選,添加購物車功能詳解
- Vue實(shí)現(xiàn)商品飛入購物車效果(電商項目)
- Vue商品控件與購物車聯(lián)動效果的實(shí)例代碼
- Vue實(shí)現(xiàn)購物車的全選、單選、顯示商品價格代碼實(shí)例
- vue+vant實(shí)現(xiàn)購物車全選和反選功能
- vue+vant-UI框架實(shí)現(xiàn)購物車的復(fù)選框全選和反選功能
- 基于Vuejs實(shí)現(xiàn)購物車功能
- vue實(shí)現(xiàn)購物車小案例
- vue實(shí)現(xiàn)商品購物車全選反選
相關(guān)文章
el-tree使用獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)數(shù)據(jù)
本文主要介紹了el-tree使用獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10vue+element實(shí)現(xiàn)圖片上傳及裁剪功能
這篇文章主要為大家詳細(xì)介紹了vue+element實(shí)現(xiàn)圖片上傳及裁剪功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-06-06Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化
這篇文章主要為大家詳細(xì)介紹了Vue引入highCharts實(shí)現(xiàn)數(shù)據(jù)可視化,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03Vue+ElementUI?實(shí)現(xiàn)分頁功能-mysql數(shù)據(jù)
這篇文章主要介紹了Vue+ElementUI?實(shí)現(xiàn)分頁查詢-mysql數(shù)據(jù),當(dāng)數(shù)據(jù)庫中數(shù)據(jù)比較多時,就每次只查詢一部分來緩解服務(wù)器和頁面壓力。這里使用elementui的?Pagination?分頁?組件,配合mysql的limit語句,實(shí)現(xiàn)分頁查詢mysql數(shù)據(jù),下面來看看具體實(shí)現(xiàn)過程,希望對大家學(xué)習(xí)有所幫助2021-12-12vue3如何使用provide實(shí)現(xiàn)狀態(tài)管理詳解
Vue3中有一對新增的api,provide和inject,熟悉Vue2的朋友應(yīng)該明,這篇文章主要給大家介紹了關(guān)于vue3如何使用provide實(shí)現(xiàn)狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下2021-10-10