《前端》使用vue建立购物车列表界面练习--2020年6月30日

最新推荐文章于 2022-04-11 22:57:06 发布

bellediao

最新推荐文章于 2022-04-11 22:57:06 发布

阅读量335

点赞数

分类专栏：前端 VUE.JS 练习

本文链接：https://blog.csdn.net/bellediao/article/details/107032751

版权

该博客展示了如何使用Vue构建购物车列表界面，包括使用v-for绑定表格数据、计算属性来实时计算总额，以及methods中定义的各种操作，如复选框、全选、数量更改、单行和批量删除功能。尽管原版案例存在一些问题，如全选按钮的事件处理和自动计算金额，但作者通过DOM操作解决了这些问题。

摘要由CSDN通过智能技术生成

最终效果图：

当勾选行时，自动进行总和计算；可以进行单列删除，也可以使用复选框，进行多选批量删除；可以对商品数量进行更改，但商品数量为1时将不能进行减少。

我的答案：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车原版</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/vue-2.4.0.js"></script>
</head>

<body>
    <div class="container">
        <div id="list">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-body">
                        <template v-if="list.length">
                            <table class="table table-bordered table-hover table-striped" style="text-align:center;">
                                <thead style="background-color: #7A8B8B">
                                    <tr>
                                        <td><input id="allcheck" type="checkbox" @click="allcheck()" :checked="list.length===listIds.length && listIds.length"></td>
                                        <td>商品名称</td>
                                        <td>商品价格</td>
                                        <td>购买数量</td>  
                                     <td>操作</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item,index) in list" :key = "index">
                                        <td><input id="checkBox" type="checkbox" name="boxs" :value="index" @click="checkedOne(item.id)" :checked="listIds.indexOf(item.id)>=0"></td>
                                        <td>{
  { item.name }}</td>
                                        <td>{
  { item.price }}</td>
                                        <td><button type="button" class="btn btn-xs" @click="del(index)" :disabled="item.count===1">-</button>
                                            {
  { item.count }}
                                            <button type="button" class="btn btn-xs" @click="add(index)">+</button></td>
                                        <td><button type="button" class="btn btn-xs" @click="move(index)">移除记录

最低0.47元/天解锁文章

bellediao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《前端》使用vue建立购物车列表界面练习--2020年6月30日

最终效果图：当勾选行时，自动进行总和计算；可以进行单列删除，也可以使用复选框，进行多选批量删除；可以对商品数量进行更改，但商品数量为1时将不能进行减少。我的答案：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...
复制链接

扫一扫

专栏目录