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,一经查实,立即删除!

相关文章

B2117 整理药名

整理药名 题目描述 医生在书写药品名的时候经常不注意大小写&#xff0c;格式比较混乱。现要求你写一个程序将医生书写混乱的药品名整理成统一规范的格式&#xff0c;即药品名的第一个字符如果是字母要大写&#xff0c;其他字母小写。 如将 ASPIRIN 、 aspirin 整理成 Aspir…

python获取cookie的方式

通过js获取cookie&#xff0c;避免反复登录操作。 经验证在JD上没有用&#xff0c;cookie应该无痕或者加密了&#xff0c;只能用单浏览器不关的模式来实现&#xff0c;但是代码留着&#xff0c;其他网站可能有用。 def cookie_set():driver webdriver.Chrome(optionschrome_…

一千题,No.0024(数素数)

令 Pi​ 表示第 i 个素数。现任给两个正整数 M≤N≤104&#xff0c;请输出 PM​ 到 PN​ 的所有素数。 输入格式&#xff1a; 输入在一行中给出 M 和 N&#xff0c;其间以空格分隔。 输出格式&#xff1a; 输出从 PM​ 到 PN​ 的所有素数&#xff0c;每 10 个数字占 1 行&…

Kubernetes 文档 / 概念 / 工作负载 / 工作负载管理 / Job

Kubernetes 文档 / 概念 / 工作负载 / 工作负载管理 / Job 此文档从 Kubernetes 官网摘录 中文地址 英文地址 Job 会创建一个或者多个 Pod&#xff0c;并将继续重试 Pod 的执行&#xff0c;直到指定数量的 Pod 成功终止。 随着 Pod 成功结束&#xff0c;Job 跟踪记录成功完成的…

原哥花了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 系…

大模型训练中CUDA out of memory的几种解决方法

常用&#xff1a; 1. 减小batch size 2. 如果需要较大的batch size来达到预期训练指标效果&#xff0c;则使用gradient accumulation来累积梯度&#xff0c;达到等价效果的同时&#xff0c;占用显存小&#xff1b; 3. 使用低精度做训练。&#xff08;mixed precision traini…

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

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

YOLO系列模型疑问

YOLO模型V1版本 1、论文里提到bounding box的&#xff08;x&#xff0c;y&#xff09;值表示什么意思呢&#xff1f; 原论文&#xff1a; Each bounding box consists of 5 predictions: x, y, w, h, and confidence. The (x, y) coordinates represent the center of the bo…

Golang发送GET请求并设置查询参数

服务端 package mainimport ("encoding/json""net/http""zdpgo_chi""zdpgo_chi/middleware" )func main() {r : zdpgo_chi.NewRouter()r.Use(middleware.RequestID)r.Use(middleware.RealIP)r.Use(middleware.Logger)r.Use(middlewar…

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

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

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

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

每周题解:繁忙的都市

题目链接 繁忙的都市 题目描述 城市 C 是一个非常繁忙的大都市&#xff0c;城市中的道路十分的拥挤&#xff0c;于是市长决定对其中的道路进行改造。城市 C 的道路是这样分布的&#xff1a;城市中有 n n n 个交叉路口&#xff0c;有些交叉路口之间有道路相连&#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 题目是这样的…

简述 v-model 双向绑定的原理是什么?

v-model 是 Vue.js 中用于实现表单输入和应用状态&#xff08;即数据&#xff09;之间双向绑定的指令。其原理可以概括如下&#xff1a; 基本思想&#xff1a; v-model 是 v-bind 和 v-on 的语法糖&#xff0c;它结合了输入元素的 value 属性和 input 事件。当输入元素的值发生…

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(…

Java中print,println,printf的功能以及区别

在Java中&#xff0c;System.out.print, System.out.println, 和 System.out.printf 都是用于在控制台输出的方法&#xff0c;但它们在使用和功能上有所不同。 System.out.print: * 功能&#xff1a;将指定的内容输出到控制台&#xff0c;但不换行。 * 示例&#xff1a;Sy…