1-7【任务1-1】编写程序代码计算金额ppt课件 Vue.js基础与应用开发实战（微课版）.pptx
( 4.5 )《1-7【任务1-1】编写程序代码计算金额ppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《1-7【任务1-1】编写程序代码计算金额ppt课件 Vue.js基础与应用开发实战（微课版）.pptx（7页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、1-7【任务1-1】编写程序代码计算金额教学课件 Vue.js基础与应用开发实战（微课版）【任务1-1】编写程序代码计算金额编写HTML代码实现以下功能：（1）屏幕上分别显示单价、数量、金额的提示文本及其初始值。（2）单击屏幕中的【+】能增加数量，单击【-】能减少数量，并且动态改变金额值。编写JavaScript代码实现以下功能：（1）分别定义price、number数据，并分别赋初值为30、0。（2）定义amount计算属性，该属性返回单价和数量的乘积。【任务描述】在指定文件夹中创建网页文件case01-calculatedAmount.html。1编写HTML代码实现指定功能HTML代码如
2、下所示。单价：price 数量：number 金额：amount 【任务实施】2编写JavaScript代码实现指定功能JavaScript代码如下所示。var vm=new Vue(el:#main,data:price:30,number:0 ,computed:/计算金额 amount()return this.price*this.number )【任务实施】网页calculatedAmount-case.html的初始浏览效果如图1-11所示。【任务实施】图图1-11 网页网页calculatedAmount-case.html的初始浏览效果的初始浏览效果连续两次单击【+】按钮，数量显示为2，金额显示为60，如图1-12所示。接着单击1次【-】按钮，数量显示为1，金额显示为30，如图1-13所示。图1-12 连续两次单击【+】按钮的结果图1-13 接着单击1次【-】按钮的结果快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！
- 配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词：
- 任务1-1 1-7【任务1-1】编写程序代码计算金额ppt课件 Vue.js基础与应用开发实战微课版 任务 编写 程序代码 计算 金额 ppt 课件 Vue js 基础 应用 开发 实战 微课版
淘文阁 - 分享文档赚钱的网站所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
链接地址：https://www.taowenge.com/p-87516638.html
限制150内