《1-7【任务1-1】编写程序代码计算金额ppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《1-7【任务1-1】编写程序代码计算金额ppt课件 Vue.js基础与应用开发实战（微课版）.pptx（7页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
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次【-】按钮的结果快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！