huanggr
购物车是商城一类的网站的重要的一部分，因为涉及对多个数据的操作，逻辑也相对会复杂很多，使用jquery的情况下，逻辑会很复杂，很容易出错，但是使用vue进行搭建就会容易很多了。接下来我们就一起来搭建一个简单的购物车吧
Html部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } img { border: 0; } ol, ul, li { list-style: none; } .box { width: 600px; height: auto; border: 1px solid #ccc; margin: 10px auto; } .box ul { display: flex; flex-wrap: wrap; } ul>li { width: 16.66666666%; height: 50px; text-align: center; line-height: 50px; border: 1px solid #ccc; box-sizing: border-box; } </style> <script src="vue2.5.16.js"></script> </head> <body> <div class="box"> <ul> <li>全选/反选 <input type="checkbox" :checked="all" v-model="all"> </li> <li>商品序号</li> <li>商品名称</li> <li>商品价格</li> <li>商品数量</li> <li>总价</li> <template v-for="item,i in data"> <li> <input type="checkbox" :checked="item.checked" class="check" @click="check(i)"> </li> <li>{{item.id}}</li> <li>{{item.title}}</li> <li>{{item.price}}</li> <li> <input class="number" :min="0" @change="rowmoney(item.price,i)" type="number" style="width:30px" :vlaue="item.number"> </li> <li> {{item.rowmoney ==""?'暂无价格':item.rowmoney}}</li> </template> </ul> <p style="width:auto;">当前选择数量为：{{CountNumber}}当前总钱数为:{{CountMoney}}</p> </div> </body> </html> |
Javascript部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <script> let data = [{ checked: true, id: 1, title: 'iphone', price: 1999, number: 0, rowmoney: 0 }, { checked: true, id: 2, title: 'iphone', price: 1999, number: 0, rowmoney: 0 } ]; new Vue({ el: '.box', data: { data, message: '', state: false }, methods: { rowmoney(price, index) { //通过类名获取到钱数 var number = document.getElementsByClassName('number')[index].value; this.data[index].number = number; this.data[index].rowmoney = price * number; }, check(index) { //通过类名知道是否被选中了，从而进行赋值操作 var check = document.getElementsByClassName('check')[index].checked; console.log(check); this.data[index].checked = check; } }, computed: { CountMoney() { let money = 0; this.data.forEach(item => { if (item.checked) money += parseInt(item.rowmoney); }) return parseInt(money); }, CountNumber() { let num = 0; this.data.forEach(item => { if (item.checked) num += parseInt(item.number); }) return parseInt(num); }, all: { get() { let flag = this.data.every(item => item.checked); return flag; }, set(newValue) { let flag = this.data.forEach(item => { item.checked = newValue; }) } } } }) </script> |
这部分利用Vue中的computed属性就可以完成了，应该算是初级的购物车了，使用vue中的状态管理（Vuex）就可以实现更加强大的购物车了，后面续更，敬请期待
7