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博客
相关文章：
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&…...
rtsp协议分析
rtsp (real-time stream protocol)实时流媒体控制协议 属于基于文本的应用层协议，rtsp的底层协议可以是udp也可以是tcp ffmpeg 参数-rtsp_transport tcp 用于指定RTSP会话底层传输协议为TCP 本身并不传输流媒体数据，只是提供流媒体的控制，实…...
Spring Web MVC(2)
响应 Http响应的结果可以是数据也可以是静态页面可以针对响应设置状态码 Header信息 返回静态页面注解RestController和Controller 我们创建一个前端页面 package com.example.demo.demos.web.controller;import org.springframework.web.bind.annotation.RequestMapping; i…...
Python-图片旋转360，保存对应图片
#Author ：susocool #Creattime:2024/5/25 #FileName:turn360 #Description: 会旋转指定的图像文件360度，并将每个旋转后的图像保存到指定目录，文件名以旋转角度命名。 from PIL import Imagedef rotate_and_save(image_path, output_dir) :# …...
JavaSE——集合框架二（1/6）-前置知识-可变参数、Collections工具类
目录 可变参数 Collections工具类 Collections的常用静态方法 实例演示 可变参数 可变参数 就是一种特殊形参，定义在方法、构造器的形参列表里，格式是：数据类型...参数名称 可变参数的特点和好处 特点：可以不传数据给它&am…...
我用LLaMA-Factory微调大模型来实现商品评论情感分析，准确率高达91.70%
大家好，我是程序锅。 最近在modelscope上闲逛的时候，在数据集板块发现有一个商品评论情感预测数据集。这个数据集源自一个比赛，它的目的是为了预测电商平台顾客的评论是好评还是差评。 数据示例如下所示（其中0代表差评ÿ…...
四大进制--详解--以及进制转换规则
进制介绍 对于整数, 有四种表达方式: 二进制BIN: 0,1 , 满2进1.以0b或0B开头 所谓2进制就是使用0和1来表示一个数, 满2进1如果在开发中看到有这种写法: int n1 0b1010; 这种写法没有错, 这是二进制的一种表示方式 十进制DEC: 0-9, 满10进1 十进制就是0-9来表示一个数, 满10进…...
谈谈API和人工智能领域的开发和使用以及AI大模型开发进程。
API，全称为Application Programming Interface，即应用程序编程接口，是一些预先定义的函数。 它的主要目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而无需访问源码，或理解内部工作机制的细节。API函数包含在操作系统的动态连接库文件中，例如Win…...
用Python Pygame做的一些好玩的小游戏
有些游戏的代码比较长就不公布了 1.简简单单 1.疯狂的鸡哥 你要准备的图片： 命名为：ji.png 代码： import pygame import random as r pygame.init() pygame.display.set_caption(aaa) pm pygame.display.set_mode((800,600))class Ls(py…...
【吊打面试官系列】Java高并发篇 - ThreadLocal 是什么？有什么用？
大家好，我是锋哥。今天分享关于 【ThreadLocal 是什么？有什么用？】面试题，希望对大家有帮助； ThreadLocal 是什么？有什么用？ ThreadLocal 是一个本地线程副本变量工具类。主要用于将私有线程和该…...
Spring MVC的数据转换及数据格式化：java 转换器接口（将一种类型的对象转换为另一种类型及其子类对象）
文章目录 引言I 将String转为BaseEnum的子类对象1.1 注册转换器工厂1.2 实现转换器工厂1.3 实现转换器接口 `interface Converter<S, T> `1.4 根据枚举code和type获取枚举II 枚举2.1 枚举接口2.2 枚举子类2.3 请求实体引言 Spring MVC的数据转换及数据格式化 应用场景：…...
【开源】多语言大型语言模型的革新：百亿参数模型超越千亿参数性能
大型人工智能模型，尤其是那些拥有千亿参数的模型，因其出色的商业应用表现而受到市场的青睐。但是，直接通过API使用这些模型可能会带来数据泄露的风险，尤其是当模型提供商如OpenAI等可能涉及数据隐私问题时。私有部署虽然是一个解决…...
DDL—表—数据类型—日期时间类型相关语法
（1）表格如下： 类型大小范围格式描述DATE31000-01-01 至 9999-12-31YYYY-MM-DD日期值（年月日）TIME3-838:59:59 至 838:59:59HH:MM:SS时间值或持续时间（时分秒）YEAR11901 至 2155YYYY年份值DATET…...
Ant Design pro 6.0.0 搭建使用以及相关配置
一、背景 在选择一款比较合适的中台的情况下，挑选了有arco design、ant design pro、soybean、vue-pure-admin等中台系统，经过筛选就选择了ant design pro。之前使用过arco design 搭建通过组件库拼装过后台管理界面，官方文档也比较全&#…...
Vue生命周期钩子是如何实现的
Vue的生命周期钩子是在Vue组件创建、挂载、更新、销毁等过程中自动调用的特殊函数。这些钩子允许开发者在组件的不同阶段执行特定的逻辑。Vue 2 和 Vue 3 在生命周期钩子上有一些差异，主要是因为Vue 3引入了Composition API和更现代的JavaScript特性。 Vue 2 的生命…...
002 仿muduo库实现高性能服务器组件_整体框架
🌈个人主页：Fan_558 🔥 系列专栏：仿muduo 🌹关注我💪🏻带你学更多知识 文章目录 前言项目框架小结 前言 本文不会包含任何项目模块的代码，旨在向你介绍项目具体分为哪几个模块&am…...
车道线识别与预警系统LDWS（代码+教程）
车道线识别与预警系统（Lane Departure Warning System, LDWS）作为智能交通系统中的重要组成部分，旨在通过先进的图像处理和计算机视觉技术，实时监测车辆行驶过程中的车道位置，预防因驾驶员疏忽或疲劳导致的车道偏离事故…...
Python基础学习笔记（七）——元组
目录 一、一维元组的介绍、创建与修改二、组合的基本操作1. 遍历2. 取长度3. 取最值4. 打包5. 批处理5.1 map()函数5.2 lambda 表达式5.3 lambda 表达式 map()函数 一、一维元组的介绍、创建与修改 元组（tuple），一种不可变、有序、可重复的数…...
安卓开发：相机水印设置
1.更新水印 DecimalFormat DF new DecimalFormat("#"); DecimalFormat DF1 new DecimalFormat("#.#");LocationManager LM (LocationManager)getSystemService(Context.LOCATION_SERVICE); LM.requestLocationUpdates(LocationManager.GPS_PROVIDER, 2…...
Excel工作表单元格单击选中事件，VBA动态数值排序
Excel工作表单元格单击选中事件，VBA动态数值排序（WX公众号：Excel潘谆白说VBA) 文章目录 前言一、运行效果二、代码前言 面对每月的消费账单，面对月底待还的信用卡或花呗，面对不足三位数的余额，你是否怀疑过账单自己的消费。你是否因此开始记账，每个月记流水,想知道当月…...
Stable-Diffusion-v1-5-archiveWebUI插件开发指南：Python扩展接口与SDK文档
Stable-Diffusion-v1-5-archive WebUI插件开发指南：Python扩展接口与SDK文档 1. 引言：为什么需要开发自己的WebUI插件？ 如果你已经用了一段时间的Stable Diffusion v1.5 Archive，可能会发现一个痛点：每次生成图片都要…...
 - Win10（微星主板 - MSI）)
Windows 正版系统安装(重装) - Win10（微星主板 - MSI）
一、启动盘制作 本文章为正版 Windows 安装系统流程，安装版本为 Windows 10 家庭版 官方免费版本！ Mac 制作 Win10 启动盘（不推荐，因为 U盘 无法格式化为 NTFS，以前是可以选择 Microsoft NTFS 格式的，但是…...
别再只把Obsidian当笔记软件了！用DeepSeek R1和Copilot插件，打造你的AI驱动第二大脑
从静态笔记到智能伙伴：用DeepSeek R1重构Obsidian的认知边界 当大多数人还在用Obsidian记录会议纪要或整理读书笔记时，一群先锋用户已经将它改造成了会主动思考的"数字大脑"。想象一下：清晨打开笔记软件，AI助手不仅整理…...
终极网盘直链下载助手：如何一键破解八大网盘限速？
终极网盘直链下载助手：如何一键破解八大网盘限速？ 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ，支持 百度网盘 / 阿里云盘 / 中国移动云盘…...
重新定义桌面美学：掌握TranslucentTB的3个颠覆性任务栏定制方案
重新定义桌面美学：掌握TranslucentTB的3个颠覆性任务栏定制方案 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB 想象一下&…...
【数据结构与算法】第38篇：图论（二）：深度优先搜索（DFS）与广度优先搜索（BFS）
一、图遍历的基本概念1.1 为什么需要遍历和树一样，图也需要一种方式“访问”所有顶点。但图可能有环，所以需要标记已访问的顶点，避免重复访问。1.2 两种遍历方式遍历方式核心思想数据结构DFS一条路走到底，回溯栈（递归&…...
Qwen2.5-VL-7B-Instruct部署教程：GPU算力监控（nvidia-smi）+服务健康检查脚本
Qwen2.5-VL-7B-Instruct部署教程：GPU算力监控（nvidia-smi）服务健康检查脚本 1. 项目概述 Qwen2.5-VL-7B-Instruct是一款强大的多模态视觉-语言模型，能够同时处理图像和文本输入，生成高质量的响应。该模型特别适合需要…...
CogVideoX-2b镜像避坑指南：解决显存溢出、黑屏等常见问题
CogVideoX-2b镜像避坑指南：解决显存溢出、黑屏等常见问题 1. 为什么你需要这份避坑指南 当你第一次尝试使用CogVideoX-2b生成视频时，可能会遇到各种意外情况：显存突然爆满、生成的视频全是黑屏、或者等待了十分钟却没有任何输出。这些问题不…...
Gemma-3-12B-IT WebUI惊艳案例：根据‘设计一个分布式ID生成器’需求输出Snowflake实现+压测方案
Gemma-3-12B-IT WebUI惊艳案例：根据‘设计一个分布式ID生成器’需求输出Snowflake实现压测方案 1. 引言 最近在做一个新项目，需要设计一个高并发的分布式系统。系统还没开始写，第一个拦路虎就出现了：怎么给海量数据生成全局唯一…...
别再死记硬背了！用Python代码复现Photoshop 27种混合模式（附完整源码）
用Python代码实现Photoshop混合模式的终极指南 在数字图像处理领域，Photoshop的混合模式就像魔术师的调色板，能够创造出令人惊叹的视觉效果。但你是否想过这些看似神秘的混合效果背后，其实是一系列精确的数学公式在起作用？本文将带…...