实现购物车的全选、单选、总价

购物车—全选、单选、总价

效果展示
index.html
全选：
反选：
删除：
总价：
总数量：

效果展示

让我们步入正题，往下看

index.html

v-for循环data下的goodsList数据进行数据渲染。一定要引入vue.js组件

全选：

在全选的input中绑定checked属性为isCheckedAll，在计算属性中isCheckedAll函数是操作goodsList数据下的isChaecked每一项为true时，input框都为true。

反选：

来一个点击事件为chang，在methods中操作。var一个flag来对计算属性中的isCheckedAll方法进行取反，在forEach循环时设置isCheacked=flag

删除：

绑定一个del点击事件，传入index参数作为goodsList下标，对数据进行循环使用splice对点击的商品下标进行删除


       商场购物车
       :全选
       

           

           商品名称：

           单价：
           
           数量：
                    
                

           小结：{{good.price*good.count}}

           
       

       总价:

       计件:{{jsut}}

总价：

像计算总价、数量等这些就适合在computed计算属性中使用。来一个sunPrice函数，var声明一个总价为0，对数据进行循环，if判断input有一个为true时就会对商品和数量进行相乘计算

总数量：

跟总价一样。来一个jsut函数，var声明一个总数量为0，对数据进行循环，if判断input有一个为true时就会对所有的商品数量进行相加计算

总价和总数量数据渲染两种方法：

{{sunPrice}}


{{jsut}}

说明 v-texthe v-html区别：
{{}} 和 v-text 渲染效果一样只会返回标签的内容不会把标签的效果渲染出

v-html 会带着标签效果一样显示,适合对接后台返回富文本内容

实现购物车的全选、单选、总价

商场购物车

总价:

计件:{{jsut}}

Java相关栏目本月热门文章