第二阶段模块二作业第二题

最新推荐文章于 2022-04-12 22:17:30 发布

匿名张3

最新推荐文章于 2022-04-12 22:17:30 发布

阅读量162

点赞数

分类专栏：作业笔记文章标签： vue.js html

本文链接：https://blog.csdn.net/crckerfang/article/details/115206487

版权

作业笔记专栏收录该内容

28 篇文章 4 订阅

订阅专栏

题目：
使用Vue完成简易购物车案例
在这里插入图片描述
题目要求:
1.作出如图的展示效果
2.点击购买加号则数量增加,总价格随之更变
3.如果书本数量为1则不能减少
4.点击移除,删除该行,总价格随之更变
5.使用VUE + HMLT 实现该案例

思路：
在vue的视频里讲过一个类似的案例(这里为了动图演示方便，我把删除提示框去掉了)，自动更新价格的方法视频里没有讲过，需要使用computed关键字，剩下的部分在视频案例的基础上修改即可。

演示过程：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>简易购物车</title>
</head>

<body>
    <div id="app">
    <!-- 设置表格表格边框为1px，宽为整个屏幕的35%,单元格间距为0 -->
        <table id="t1" border="1px" width="35%" cellspacing="0">
            <!-- 设置第一行背景色为灰色,居中显示 -->
            <tr bgcolor="#D3D3D3" align="center">
                <!-- 设置字体为加粗 -->
                <td></td>
                <td><b>书籍名称</b></td>
                <td><b>出版日期</b></td>
                <td><b>价格</b></td>
                <td><b>购买数量</b></td>
                <td><b>操作</b></td>
            </tr>
            <!-- 循环打印出书籍信息 -->
            <tr v-for="(book,index) in books " align="center">
                <td>{{index +1}}</td>
                <td>{{book.name}}</td>
                <td>{{book.date}}</td>
                <td>￥{{book.price.toFixed(2)}} </td>
                <!-- 当点击对应按钮，调用对应功能,其中当购买数量等于1时，不能在减少了 -->
                <td><input  :disabled="book.num <= 1" type="button" id="b1" value="-" @click="subNum(index)">
                    {{book.num}} <input type="button" id="b2" value="+" @click="addNum(index)"></td>
                <td><input type="button" @click="deleteItem(index)" value="移除"> </td>
            </tr >
        </table>
        <h2>总价格:￥{{totalPrice}}</h2>
    </div>
    
</body>
<script>
     new Vue({
        el:"#app",
        data:{
            //书籍信息
            books:[{
                name:"《java编程思想》",
                date:"2020-9",
                price:98.00,
                num:1,
            },
            {
                name:"《数据分析与数据原理》",
                date:"2020-2",
                price:39.00,
                num:1,
            },
            {
                name:"《Hadoop权威指南》",
                date:"2020-10",
                price:59.00,
                num:1,
            },
            {
                name:"《代码大全》",
                date:"2018-8",
                price:128.00,
                num:1,
            }],
        },
        methods:{
            // 删除该行数据信息方法
            deleteItem(index){
                this.books.splice(index,1)
            },
            // 书籍数量减少
            subNum(index){
                this.books[index].num--
            },
            // 书籍数量增加
            addNum(index){
                this.books[index].num++
            }
        },
        // 自动计算总价格
        computed:{
           totalPrice(){
               var totalPrice=0;
               for(let i in this.books){
                   totalPrice += this.books[i].price * this.books[i].num
               }
               return totalPrice;
           } 
       
        }
    })
</script>
</html>

匿名张3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二阶段模块二作业第二题

题目：使用Vue完成简易购物车案例题目要求:1.作出如图的展示效果2.点击购买加号则数量增加,总价格随之更变3.如果书本数量为1则不能减少4.点击移除,删除该行,总价格随之更变5.使用VUE + HMLT 实现该案例思路：在vue的视频里讲过一个类似的案例，自动更新价格的方法视频里没有讲过，使用computed关键字即可，剩下的部分在视频案例的基础上修改即可。演示过程：代码如下：<!DOCTYPE html><html lang="en"><he
复制链接

扫一扫

专栏目录