Web课外练习9

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>邮购商品业务</title><!-- 引入vue.js --><script src="./js/vue.global.js" type="text/javascript"></script><link rel="stylesheet" href="./css/style.css"></head>
<body><div id="vue-e-22"><div><form><fieldset><legend align="center">邮购商品业务</legend><!--TODO1: 在下面四行代码中补全v-model指令,完成表单数据绑定 理解v-model双向绑定的特点 -->客户姓名:<input type="text" key="name" v-model="name"/>单价:<input type="text" key="price" v-model="price"/>数量:<input  type="text" key="count" v-model="count"/>购买价:<input type="text"  key="total" v-model="total" readonly><br><br>总价:<input type="text" readonly v-model="sum" key="sum">运费:{{ freight }}(购买价>=100元免运费)<br><input type="button" @click="add" value="记入流水"><input type="button" @click="clear" value="重置" /></fieldset></form></div><table border="1"><caption>销售流水帐</caption><thead><tr><th>业务时间</th><th>客户姓名</th><th>购买价</th><th>运费</th><th>总金额</th></tr></thead><tbody><tr v-for="(item, index) in business" :key="index"><td>{{ formatDate(item.dateTime) }}</td><td>{{ item.name }}</td><td>{{ item.totalAll }}</td><td>{{ item.freight }}</td><td>{{ item.sumTotal }}</td></tr></tbody></table></div><script type="text/javascript">const { createApp, ref, computed } = Vue;createApp({setup() {const name = ref('');const price = ref('');const count = ref('');const business = ref([]);// total计算属性const total = computed(() => {// TODO2:下面补充代码,完成计算购买价if (name.value && price.value && count.value)return price.value * count.value;});//freight计算属性const freight = computed(() => {// TODO3:下面补充代码,计算运费,购买价大于100免运if(total.value>=100)return 0;return 10;});// sum是计算属性const sum = computed(() => {// TODO4:下面补充代码,完成计算包括运费在内的总价if (name.value && price.value && count.value)return total.value + freight.value;});const clear = () => {// TODO5:下面补充代码,完成清除输入域name.value = '';price.value = 0;count.value = 0;business.value = [];};const add = () => {// TODO6:下面补充代码,完成添加流水if (name.value && price.value && count.value) {recode = {dateTime: new Date(),name: name.value,totalAll: total.value,freight: freight.value,sumTotal: sum.value};business.value.push(recode);}};const formatDate = (date) => {let dy = date.getFullYear();let dm = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;let dd = date.getDate();let dhs = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();let dms = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();let dss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();return `${dy}年${dm}月${dd}日  ${dhs}:${dms}:${dss}`;};return {name,price,count,business,total,freight,sum,clear,add,formatDate};}}).mount('#vue-e-22');</script>
</body>
</html>

 按住Ctrl点击导入的js和css文件路径将所需代码复制过去,或是将文件路径更改

  将helloworld.vue文件的多余部分删去

效果图:

 

配置环境可参考: 如何搭建一个vue项目(完整步骤)_vue搭建-CSDN博客

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/15948.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

原哥花了1个多月的时间终于开发了一款基于android studio的原生商城app

大概讲一下这个app实现的功能和前后端技术架构。 功能简介 广告展示商品展示跳转淘宝联盟优惠卷购买发布朋友圈宝妈知识资讯商品搜索朋友圈展示/点赞/评论登陆注册版本升级我的个人资料商品和资讯收藏我的朋友圈意见反馈 安卓端技术选型 Arouter组件化daggerrxjavaretrofit…

基于开源二兄弟MediaPipe+Rerun实现人体姿势跟踪可视化

概述 本文中&#xff0c;我们将探索一个利用开源框架MediaPipe的功能以二维和三维方式跟踪人体姿势的使用情形。使这一探索更有趣味的是由开源可视化工具Rerun提供的可视化展示&#xff0c;该工具能够提供人类动作姿势的整体视图。 您将一步步跟随作者使用MediaPipe在2D和3D环…

【计算机毕业设计】基于SSM+Vue的校园美食交流系统【源码+lw+部署文档】

目录 前 言 第1章 概述 1.1 研究背景 1.2 研究目的 1.3 研究内容 第二章 开发技术介绍 2.1 Java技术 2.2 Mysql数据库 2.3 B/S结构 2.4 SSM框架 第三章 系统分析 3.1 可行性分析 3.1.1 技术可行性 3.1.2 经济可行性 3.1.3 操作可行性 3.2 系统性能分析 3.3 系…

自麻省理工学院和谷歌最新研究:零样本跨语言对齐的新途径

在构建实用的语言模型&#xff08;LMs&#xff09;时&#xff0c;使模型与人类偏好对齐是一个不可或缺的阶段。这通常需要大量的标注偏好数据&#xff0c;这些数据对于多种语言来说难以获取&#xff0c;尤其是对于多语种环境&#xff0c;这使得扩展到更多语言变得具有挑战性。本…

看这两位东北圣女美吗?如何描写美女的大长腿?

看这两位东北圣女美吗&#xff1f;如何描写美女的大长腿&#xff1f; 最近署名为懂球娘娘的一篇描写东北圣女的文章火了&#xff0c;文中描述了海棠朵朵与辛芷蕾这两位娇媚动人的角色。其美艳动人的形象和魅力四溢的描写让人为之倾倒。 这种通过文字展现人物魅力的能力让人佩服…

Hadoop运行wordcount实例任务卡在job running的多种情况及解决方法

第一种&#xff1a;配置问题 这是别人的图片&#xff0c;据楼主排查解决是因为hosts配置问题… 现象&#xff1a;各种无法运行、启动 解决办法&#xff1a; 1、修改日志级别 export HADOOP_ROOT_LOGGERDEBUG,console 查看下详细信息&#xff0c;定位到具体问题解决 第二种&…

5月26(信息差)

&#x1f30d; 珠峰登顶“堵车”后冰架断裂 5人坠崖 2人没爬上来&#xff01; 珠峰登顶“堵车”后冰架断裂 5人坠崖 2人没爬上来&#xff01; &#x1f384; Windows 11 Beta 22635.3646 预览版发布&#xff1a;中国大陆地区新增“微软电脑管家”应用 ✨ 成都限购解除即将满…

[图解]产品经理-竞赛题解析:阿布思考法和EA

1 00:00:00,410 --> 00:00:02,330 今天我们来说一道 2 00:00:02,610 --> 00:00:04,690 前些天出的一道竞赛题 3 00:00:07,250 --> 00:00:09,310 怎么样用阿布思考法 4 00:00:09,320 --> 00:00:10,540 来改进EA 5 00:00:11,690 --> 00:00:12,620 题目是这样的…

Kivy 项目51斩百词 5

MRWord\pages\infopage\info.py def read_random_word(self) def read_random_word(self):"""随机读取一条数据"""sql "SELECT * FROM word WHERE id (SELECT word_id FROM today ORDER BY RANDOM() limit 1)"rows select_data(sq…

Django 里html模板

Django 提供两种方式让程序员自定义html模板。 第一种方法 在项目文件夹里的urls.py进行添加 修改代码如下 from django.contrib import admin from django.urls import path from app01 import views # 得添加这行urlpatterns [path(xxx/, views.home), # 添加这行path(…

TXT文本编辑器:一键提取,多关键字匹配,内容尽在掌控!

在浩如烟海的文档中&#xff0c;寻找关键信息往往是一项繁琐而耗时的任务。你是否曾经为了查找某个关键字而翻遍了整个文件夹&#xff0c;却仍然一无所获&#xff1f;现在&#xff0c;有了TXT文本编辑器&#xff0c;这一切都将变得轻松而高效 这款软件以其简洁明了的操作界面和…

最近5星好评的华为的书《常变与长青》

常变与长青 (豆瓣) 作者简介 郭平&#xff0c;1988年加入华为&#xff0c;历任产品开发部项目经理、供应链总经理、总裁办主任、管理工程部总裁、企业发展部总裁、终端公司董事长兼总裁、公司轮值CEO、财经委员会主任、公司副董事长、轮值董事长等职务&#xff0c;现任公…

微信小程序毕业设计-学生知识成果展示与交流系统项目开发实战(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…

Keyshot v11 解锁版安装教程 (3D光线追踪与全域光渲染程序)

前言 keyshot是一款实时渲染模式的软件。实时渲染是目前比较流行的一种渲染方式&#xff0c;优点是快速。调节的材质&#xff0c;灯光修改&#xff0c;光影变化等修改的各种参数结果&#xff0c;所见即所得&#xff0c;意思是你在软件操作界面看到的&#xff0c;就是最终的结果…

绘制t-SNE图

什么是t-SNE图&#xff1f; 如下图&#xff0c;下图来源于论文Contrastive Clustering 一般用于分类问题/对比学习。 作用&#xff1f; 体现出经过层层训练&#xff0c;类内越来越紧密&#xff0c;类间差异越来越大&#xff1b;或者也可以做消融可视化。 怎么画&#xff1f…

vim操作手册

vim分为插入模式、命令模式、底行模式。 插入模式&#xff1a;编辑模式 命令模式&#xff1a;允许使用者通过命令&#xff0c;来进行文本的编辑控制 底行模式&#xff1a;用来进行让vim进行包括但不限于shell进行交互 w&#xff1a;保存 wq&am…

SwiftUI中的Stepper(系统Stepper以及自定义Stepper)

本篇文章主要介绍一下Stepper&#xff0c;这个组件在UIKit中也已经有较长的历史了&#xff0c;下面看看在SwiftUI中如何使用&#xff0c;有哪些更加便捷的方法呢&#xff1f; Stepper减号(-)和加号()按钮&#xff0c;可以点击后以指定的数值进行加减。 基础初始化方法 Stepp…

【动态规划】斐波那契数列模型(C++)

目录 1137.第N个泰波那契数 解法&#xff08;动态规划&#xff09; 算法流程 1. 状态表⽰&#xff1a; 2. 状态转移⽅程&#xff1a; 3. 初始化&#xff1a; 4. 填表顺序&#xff1a; 5. 返回值&#xff1a; C算法代码 优化&#xff1a; 滚动数组 测试&#xff1a; …

HP Laptop 15s-fq2xxx,15s-fq2706TU原厂Win11系统镜像下载

惠普星15青春版原装Windows11系统&#xff0c;恢复出厂开箱状态oem预装系统&#xff0c;带恢复重置还原 链接&#xff1a;https://pan.baidu.com/s/1t4Pc-Q0obApLkG8o_9Kkkw?pwdduzj 提取码&#xff1a;duzj 适用型号&#xff1a;15s-fq2xxx&#xff0c;15s-fq2000 15s-f…