Vue購物車的基本功實現

頁面結構,通常我們會先將整體分為3個部分,頭部(header),內容區整體(tbody),尾部(footer),的結構來構造頁面,如下

class

="box"
>
class
="header"
>
class
="item-title"
>
type
="checkbox"
@click
="checkall"
:checked
="checkedflag"
>
全選 div
>
class
="item-title"
>
名稱div
>
class
="item-title"
>
**div
>
class
="item-title"
>
數量div
>
class
="item-title"
>
小計div
>
class
="item-title"
>
操作div
>
div>
class
="tbody"
>
class
="item-tr"
v-for
="item in list"
:key
="item.id"
>
class
="item-shopcar"
>
type
="checkbox"
v-model
="item.ischecked"
>
div>
class
="item-shopcar"
>
}div
>
class
="item-shopcar"
>
}div
>
class
="item-shopcar"
>
@click
="reduce(item.id)"
v-show
="item.num>1"
>
-button
>
:value
="item.num"
>
@click
="add(item.id)"
>
+button
>
div>
class
="item-shopcar"
>
}div
>
class
="item-shopcar"
@click
="del(item.id)"
>
刪除div
>
div>
div>
class
="footer"
>
class
="item-account"
>
@click
="delall"
>
批量刪除button
>
div>
class
="item-account"
>
div>
class
="item-account"
>
div>
class
="item-account"
>
div>
class
="item-account"
>
總數}div
>
class
="item-account"
>
結算}div
>
div>
div>

>

var vue =
newvue(,
,,]}
, methods:}}
,//全選
checkall
(e))},
// 加數量
add(id)})
;},// 減數量
reduce
(id)})
;},// 刪除
del(id)},
},// 監聽用來監聽data的資料,只要資料做出了改變,那麼監聽的事件就會觸發
watch:
// },
//單選的監聽
list:}}
},//補充data的值,將值直接渲染到頁面,用於計算
computed:})
return sum;},
//總計
total()
})return totalall;}}
});script
>

vue實現簡單的購物車

lang en dir ltr charset utf 8 購物車例項title rel stylesheet href style.css type text css head on cloak v if list.length 0 th 商品名稱th 商品 th 購買數量th 操作th tr t...

Vue購物車例項

這是效果圖 看起來很簡單是不是 之前一直寫jquery 總是想著 dom 操作 思維感覺沒有切換過來 想了很久,最後使用vue的屬性進行控制,實現了多選計算屬性的功能 直接上原始碼 編號商品名稱 商品單價 購買數量 操作 移除 總價 購物車為空 這個路徑要修改,就不多說了 data isallche...

Vue購物車實戰

最近學習在學由梁灝著作的vue.js實戰，其中有一章講述如何用vue開發購物車的章節，即課後練習，以下書中的開發過程即本人的課後練習，希望能對你學習vue有所幫助。通過增加或減少商品的數量來控制商品總價 v cloak table thth,td練習一 在當前示例基礎上擴充套件商品列表，新增一項是否...