前段时间听说一段这样这样的话,如何你要快速在一个行业里习得工作的本领,那你的先掌握该领域最核心的20%的技能,根据二八定理,掌握这20%的技能知识你将可以解决该领域80%的问题。
我们都知道学习vue最经典最有代表性的demo就是购物车。今天终于静下心来和大家分享一下自己写的一个购物车的案例。
1.实现效果图如下所示
页面很简单,所有的功能列和展示都是放在一个简单的table里面
2.功能需求
a.商品数量列里面点击加减实现商品数量的加减,或者在输入框中直接输入的时候,金额和总金额也发生改变,
b.点击复选框选项实现单选 点击全选实现全选,点击取消全选实现取消全选,总金额也发生改变
c.点击删除实现删除功能,总金额也发生改变
3.整理代码如下
<template> <div id="app"> <router-view></router-view> <table border="1" width="100%" cellspacing="0" height="200px"> <tr> <th ></th> <th>商品名称</th> <th>商品单价</th> <th>商品数量</th> <th>金额</th> <th>操作</th> </tr> <tr v-for="(item,index) in cartlist" :key="item.id"> <td><input type="checkbox" @click="dainji(item,flag)" :checked="item.checked"></td> <td>{ {item.title}}</td> <td>{ {item.price| rounding}}</td> <td><button @click="changeNumber(item,false)">-</button><input type="text" :value="item.number" @change="change1($event,item)"><button @click="changeNumber(item,true)">+</button></td> <td>{ {item.price*item.number|rounding}}</