自學Vue的第06天：實戰之購物車
源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue學習</title>
<script src="../vue.js"></script>
<script src="../vue-router.js"></script>
<style type="text/css"> span { cursor: pointer; } </style>
</head>
<body>
<div id="app">
<div>
課程：<input type="text" name="" v-model='course'>
價錢：<input type="text" name="" v-model='price'>
<button @click='addcourse'>添加商品</button>
</div>
<ul>
<li v-for='(list,index) in classlist'>
課程名稱：{{list.text}}---價格:{{list.price}}
<button @click='addtochat(index)'>添加到購物車</button>
</li>
</ul>
<chat :chatarr='chatarr'></chat>
</div>
<script type="text/javascript"> //購物車組件 var Chat = { props: ['chatarr'], template: ` <div> 購物車 <table border="1"> <tr> <th>選中</th> <th>課程</th> <th>數量</th> <th>價格</th> </tr> <tr v-for="(chat,index) in chatarr"> <td><input type="checkbox" name="" v-model='chat.active'></td> <td>{{chat.text}}</td> <td> <span @click='reducecount(index)'>-</span> {{chat.count}} <span @click='addcount(index)'>+</span> </td> <td>{{chat.count * chat.price}}</td> </tr> <tr> <td colspan='2'>選中的課程：{{activeCount}}/{{count}}</td> <td colspan='2'>需付金額：{{totalpirce}}</td> </tr> </table> </div> `, //計算屬性 computed: { //已選中課程 activeCount() { return this.chatarr.filter(v => v.active).length }, //購物車存在多少項課程 count() { return this.chatarr.length }, //總價 totalpirce() { let total = 0 this.chatarr.forEach(v => { if (v.active) { total += v.price * v.count } }) return total } }, watch: { //監聽購物車數組，每當監聽到改變就存進本地存儲作數據持久化 chatarr: { handler() { window.localStorage.setItem('chat', JSON.stringify(this.chatarr)) }, deep: true } }, methods: { //增長購物車商品數量 addcount(index) { this.chatarr[index].count++ }, //減小購物車商品數量 reducecount(index) { if (this.chatarr[index].count > 1) { this.chatarr[index].count-- } else { if (window.confirm(`是否刪除${this.chatarr[index].text}?`)) { this.chatarr.splice(index, 1) } } } } } new Vue({ el: '#app', components: {Chat}, data() { return { classlist: [ {text: 'springcloud', price: 20}, {text: 'vue', price: 30}, {text: 'js', price: 40}, {text: 'php', price: 50}, ], course: '', price: '', chatarr: [] } }, methods: { addcourse() { this.classlist.push({text: this.course, price: this.price}); this.course = ''; this.price = ''; }, addtochat(index) { const goods = this.classlist[index]; const result = this.chatarr.find(v => v.text == goods.text); if (result) { result.count += 1; } else { this.chatarr.push({...goods, count: 1, active: true}); } } }, created() { //利用本地存儲作數據持久化 獲取本地存儲數據 this.chatarr = JSON.parse(window.localStorage.getItem('chat')) } }) </script>
</body>
</html>
複製代碼
相關文章
- 1. Html|Vue實戰小項目-購物車
- 2. python之編寫購物車（第二天）
- 3. python學習第一天——購物車（1）
- 4. Vue —— 購物車
- 5. Vue實現購物車Demo
- 6. JavaScript實戰之購物車案例
- 7. python實戰小程序之購物車
- 8. vue實戰記錄（二）- vue實現購物車功能之建立vue實例
- 9. vue實戰記錄（二）- vue實現購物車功能之創建vue實例
- 10. Vue實戰—購物車詳情頁面的實現（11）
- 更多相關文章...
- • DTD - 來自網絡的實例 - DTD 教程
- • 現實生活中的 XML - XML 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
歡迎關注本站公眾號,獲取更多信息
