真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

使用Vue怎么實現(xiàn)一個本地購物車功能

使用Vue怎么實現(xiàn)一個本地購物車功能？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯(lián)基于分布式IDC數(shù)據(jù)中心構(gòu)建的平臺為眾多戶提供德陽服務(wù)器托管四川大帶寬租用成都機(jī)柜租用成都服務(wù)器租用。

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

index.html




 
 購物車實例
 


 
 
 
 
 
 
 
 
  
  
  
 
 
 
 
 
 
 
 
 
 
 
 
  序號 商品名稱 商品單價 購買數(shù)量 操作
{{index + 1}} {{item.name}} {{item.price}} 
 -
 {{item.count}}
 +
  
 移除
 
 總價 : ¥{{totalPrice}}
 
 購物車為空

	序號	商品名稱	商品單價	購買數(shù)量	操作
	{{index + 1}}	{{item.name}}	{{item.price}}	- {{item.count}} +	移除

index.js

const app = new Vue({
 el : '#app',
 data : {
 allCheck:false,
 list : [
 {
 id: 1 ,
 name :'iPhone 8 ',
 price: 6188 ,
 count: 1 ,
 isChecked : false
 },
 {
 id: 2 ,
 name :'小米 8 ',
 price: 5888 ,
 count: 1 ,
 isChecked : false
 },
 {
 id: 3 ,
 name :'iPad Pro ',
 price: 11000 ,
 count: 1 ,
 isChecked : false
 },
 {
 id: 4 ,
 name :'雷神SE9',
 price: 6188 ,
 count: 10 ,
 isChecked : false
 },
 ]
 },
 computed : {
 //通過計算屬性獲取總價格
 totalPrice:function() {
 let total = 0;
 const newArr = this.list.filter(value => {
 return value.isChecked == true
 })
 for(var i = 0 ;i {
 value.isChecked = this.allCheck
 })
 },
 //單選,當(dāng)全部選中時,改變?nèi)x按鈕的狀態(tài)
 singleCheck(index) {
 this.list[index].isChecked = !this.list[index].isChecked
 const selectData = this.list.filter(value => {
 return value.isChecked == true
 })
 this.allCheck = selectData.length === this.list.length ? true : false
 }
 }
})

style.css

[v-cloak] {
 display: none;
}
table {
 border: 1px solid #e9e9e9;
 border-collapse: collapse;
 border-spacing: 0;
 empty-cells: show;
}
th,td {
 padding: 8px 16px;
 border: 1px solid #e9e9e9;
 text-align: left;
}
th {
 background: yellowgreen;
 color: #5c6b77;
 font-weight: 600;
 white-space: nowrap;
}

關(guān)于使用Vue怎么實現(xiàn)一個本地購物車功能問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

新聞標(biāo)題：使用Vue怎么實現(xiàn)一個本地購物車功能
分享地址：http://weahome.cn/article/pohiip.html