好的网站分析案例,wordpress翻译教程,移动官网网站建设,企业网站空间选择实现功能#xff1a;全选、单选、购物数量显示、合计价格显示
实现效果如下#xff1a; 思路#xff1a;
1.数据要利用写在Postman里面#xff0c;通过地址来调用Postman里面的数据。 2.写完数据后#xff0c;给写的数据一个名字#xff0c;然后加上一个空数组#xf…实现功能全选、单选、购物数量显示、合计价格显示
实现效果如下 思路
1.数据要利用写在Postman里面通过地址来调用Postman里面的数据。 2.写完数据后给写的数据一个名字然后加上一个空数组这样的话我们可以在前面用到我们写的数组可以利用v-for指令来得到相关数据内容。 3.设置初始状态的选中状态为不选中给是否选中的值为false就可以。 4.利用计算机属性computed来撰写合计总价格、选中数量以及是否全选。总价格为商品数量*商品单价总的数量等于各个商品的数量之和。
5.当进行商品数量单选或者全选的时候显示可能会不正常例如出现01、02这样的情况这时候我们需要进行转换确保我们的数量是数值类型。
部分核心代码展示总价、数量、是否选中 computed: { totalPrice() { let sum 0; for (let item of this.fruitList) { if (item.isChecked) { sum item.num * item.price; } } return sum; }, totalCount() { //初始状态数量为0 let count 0; for (let item of this.fruitList) { if (item.isChecked) { //总数量 count item.num; } } return count; }, isAll: { set(value) { for (let item of this.fruitList) { item.isChecked value; } }, get() { return this.fruitList.every((item) item.isChecked true); } } }
最终效果
