实验二 基于Vue.js的图书购物车

目录

一、实验目的

目的：熟悉Vue的基本指令，进一步熟练应用CSS+HTML+JS。

任务：使用Vue+CSS+HTML+JS，设计图书购物车。

二、实验要求

1、设计如图1的图书购物车。

2、实验安排方式：上机编码。

3、实验结果展示，包括代码（可分栏展示）和效果图。

三、实验代码

图书购物车．html

Main.js

四、实验结果

五、实验体会

六、提醒

---

一、实验目的

目的：熟悉Vue的基本指令，进一步熟练应用CSS+HTML+JS。

任务：使用Vue+CSS+HTML+JS，设计图书购物车。

二、实验要求

1、设计如图1的图书购物车。

图1 

1）点击移除按钮，则移除一行记录的显示；

2）点击“+”或者“-”按钮，则购买数量发生相应的变化，且总价也随之发生变化；

3）当页面所有记录移除完，则在页面上显示“购物车为空”。

4）当购买数量为“0”时，“-”按钮变成不可使用。

具体操作步骤：

1）设计一个main.js文件保存图1中4本书信息，编号，书籍名称，出版日期，价格，购买数量默认值为1。在main.js中已保存基本信息，需要在method中添加购买数量发生加1和减1以及移除（可使用数组的删除方法：.splice()）这三个操作方法。添加computed中的方法，实现总价格计算(可采用传统写法或者利用高阶函数reduce()实现)。

2）表格样式可设计一个.css文件，在主页面index.html中引入进来。

3）在主页面index.html中合适位置引入外部main.js文件，利用v-for指令实现表格内容的展示。

4）在“+”或者“-”按钮添加相应的监听指令，同时在“-”按钮中绑定属性：v-bind: disabled=“购买数量<=0”</