mirror of
https://github.com/Dichgrem/Vue.git
synced 2025-12-16 05:31:59 -05:00
start:vue3
This commit is contained in:
dichgrem
27
flake.lock
generated
Normal file
27
flake.lock
generated
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"nodes": {
|
||||
"nixpkgs": {
|
||||
"locked": {
|
||||
"lastModified": 1757034884,
|
||||
"narHash": "sha256-PgLSZDBEWUHpfTRfFyklmiiLBE1i1aGCtz4eRA3POao=",
|
||||
"owner": "NixOS",
|
||||
"repo": "nixpkgs",
|
||||
"rev": "ca77296380960cd497a765102eeb1356eb80fed0",
|
||||
"type": "github"
|
||||
},
|
||||
"original": {
|
||||
"owner": "NixOS",
|
||||
"ref": "nixpkgs-unstable",
|
||||
"repo": "nixpkgs",
|
||||
"type": "github"
|
||||
}
|
||||
},
|
||||
"root": {
|
||||
"inputs": {
|
||||
"nixpkgs": "nixpkgs"
|
||||
}
|
||||
}
|
||||
},
|
||||
"root": "root",
|
||||
"version": 7
|
||||
}
|
||||
25
flake.nix
Normal file
25
flake.nix
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
description = "A Nix-flake-based development environment with Vue CLI";
|
||||
|
||||
inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
|
||||
|
||||
outputs = { self, nixpkgs }:
|
||||
let
|
||||
supportedSystems = [ "x86_64-linux" "aarch64-linux" ];
|
||||
forEachSupportedSystem = f:
|
||||
nixpkgs.lib.genAttrs supportedSystems (system:
|
||||
f {
|
||||
pkgs = import nixpkgs { inherit system; };
|
||||
});
|
||||
in
|
||||
{
|
||||
devShells = forEachSupportedSystem ({ pkgs }: {
|
||||
default = pkgs.mkShell {
|
||||
packages = with pkgs; [
|
||||
nodejs
|
||||
yarn
|
||||
];
|
||||
};
|
||||
});
|
||||
};
|
||||
}
|
||||
6
test1.html
Normal file
6
test1.html
Normal file
@@ -0,0 +1,6 @@
|
||||
<!DOCTYPE <html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset=
|
||||
</head>
|
||||
</html>>
|
||||
31
vue1.html
Normal file
31
vue1.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" connect="width=devices-width,initial-scale=1.0" />
|
||||
<title>Vue3 demo</title>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="text-align: center" id="app">
|
||||
<h1>{{ count }}</h1>
|
||||
<button v-on:click="clickButton">单击</button>
|
||||
</div>
|
||||
</body>
|
||||
<!--hello-->
|
||||
<script>
|
||||
const App = {
|
||||
data() {
|
||||
return {
|
||||
count: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clickButton() {
|
||||
this.count = this.count + 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
Vue.createApp(App).mount("#app");
|
||||
</script>
|
||||
</html>
|
||||
121
vue2.html
Normal file
121
vue2.html
Normal file
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Vue 登录作业</title>
|
||||
<script src="https://unpkg.com/vue@3"></script>
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 40px;
|
||||
}
|
||||
.container {
|
||||
width: 300px;
|
||||
margin: auto;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin: 8px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" class="container">
|
||||
<h2>
|
||||
{{ isLoggedIn ? ("欢迎回来！已登录账号：" + currentUser) : "请登录" }}
|
||||
</h2>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<div v-if="!isLoggedIn">
|
||||
<input type="text" v-model="studentId" placeholder="请输入账号(学号)">
|
||||
<input type="password" v-model="password" placeholder="请输入密码">
|
||||
<button @click="login">登录</button>
|
||||
</div>
|
||||
|
||||
<!-- 登出按钮 -->
|
||||
<div v-else>
|
||||
<button @click="logout">登出</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp } = Vue;
|
||||
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
isLoggedIn: false,
|
||||
studentId: "",
|
||||
password: "",
|
||||
currentUser: "" // 保存当前登录用户
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async login() {
|
||||
if (!this.studentId || !this.password) {
|
||||
alert("请输入账号和密码！");
|
||||
return;
|
||||
}
|
||||
|
||||
// 本地验证：支持两个测试账户
|
||||
if (
|
||||
(this.studentId === "2023001" && this.password === "123456") ||
|
||||
(this.studentId === "admin" && this.password === "admin")
|
||||
) {
|
||||
this.isLoggedIn = true;
|
||||
this.currentUser = this.studentId;
|
||||
alert("本地验证成功，已登录！");
|
||||
return;
|
||||
}
|
||||
|
||||
// 否则再尝试服务器验证
|
||||
try {
|
||||
// 用 URLSearchParams 发送表单数据
|
||||
const params = new URLSearchParams();
|
||||
params.append("studentId", this.studentId);
|
||||
params.append("password", this.password);
|
||||
|
||||
const response = await axios.post("http://117.72.102.219/login.php", params, {
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded"
|
||||
}
|
||||
});
|
||||
|
||||
console.log("服务器响应：", response.data);
|
||||
|
||||
if (response.data === "success") {
|
||||
this.isLoggedIn = true;
|
||||
this.currentUser = this.studentId;
|
||||
alert("服务器验证成功！");
|
||||
} else {
|
||||
alert("账号或密码错误！");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert("登录失败，请检查网络或服务器！");
|
||||
}
|
||||
},
|
||||
logout() {
|
||||
this.isLoggedIn = false;
|
||||
this.studentId = "";
|
||||
this.password = "";
|
||||
this.currentUser = "";
|
||||
alert("您已退出登录！");
|
||||
}
|
||||
}
|
||||
}).mount("#app");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
134
vue3.html
Normal file
134
vue3.html
Normal file
@@ -0,0 +1,134 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-
|
||||
scale=1.0"
|
||||
/>
|
||||
<title>猜数游戏</title>
|
||||
|
||||
<script>
|
||||
let count = 10; // 猜测次数
|
||||
let target; // 随机目标数字
|
||||
let flag = false; // 用于控制游戏是否进行
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f0f8ff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
h2 {
|
||||
color: #333;
|
||||
}
|
||||
form {
|
||||
display: inline-block;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
input[type="text"] {
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
input[type="button"] {
|
||||
padding: 5px 10px;
|
||||
margin: 5px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #007bff;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type="button"]:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin: 10px 0;思考如何使用 Vue3 实现该游戏?
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<h2>猜数游戏</h2>
|
||||
<strong>请输入一个 0-100 之间的随机整数:</strong>
|
||||
<br /><br />
|
||||
<form>
|
||||
<input type="text" id="guess" placeholder="输入你的猜测" />
|
||||
<input type="button" id="button" value="提交" onclick="run()" />
|
||||
<input type="button" value="开始" onclick="restart()" />
|
||||
<br />
|
||||
<label
|
||||
>结果: <input type="text" id="feedback" readonly
|
||||
/></label>
|
||||
<label
|
||||
>当前还可以猜测的次数:
|
||||
<input type="text" value="10" id="count" readonly
|
||||
/></label>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function restart() {
|
||||
flag = true; // 标记游戏开始
|
||||
let guess = document.getElementById("guess");
|
||||
guess.value = ""; // 清空输入框
|
||||
let result = document.getElementById("feedback");
|
||||
result.value = ""; // 清空反馈框
|
||||
count = 10; // 重置猜测次数
|
||||
let nn = document.getElementById("count");
|
||||
nn.value = count;
|
||||
target = Math.floor(Math.random() * 101); // 生成随机数
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function run() {
|
||||
if (flag) {
|
||||
let guess = parseInt(document.getElementById("guess").value);
|
||||
// 将用户输入转换为整数
|
||||
let result = document.getElementById("feedback");
|
||||
let nn = document.getElementById("count");
|
||||
// 判断用户输入是否有效
|
||||
if (isNaN(guess) || guess < 0 || guess > 100) {
|
||||
result.value = "请输入一个 0-100 之间的有效数字!";
|
||||
return;
|
||||
}
|
||||
// 根据猜测结果给出反馈
|
||||
if (guess > target) {
|
||||
result.value = "猜的有点大!";
|
||||
} else if (guess < target) {
|
||||
result.value = "猜的有点小!";
|
||||
} else if (guess == target) {
|
||||
result.value = "猜对啦！答案是" + guess;
|
||||
flag = false; // 猜对后结束游戏
|
||||
}
|
||||
// 更新剩余猜测次数
|
||||
count -= 1;
|
||||
nn.value = count;
|
||||
// 如果猜测次数用完，结束游戏
|
||||
if (count == 0 && guess != target) {
|
||||
result.value = "游戏结束！次数已用完，正确答案是" + target;
|
||||
flag = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
122
vue4.html
Normal file
122
vue4.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>学生成绩计算</title>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background: #f3f4f6;
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #4f46e5;
|
||||
color: white;
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 0 4px rgba(79,70,229,0.4);
|
||||
}
|
||||
|
||||
input[readonly] {
|
||||
background: #f9fafb;
|
||||
color: #374151;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" class="card">
|
||||
<table>
|
||||
<tr>
|
||||
<th>学科</th>
|
||||
<th>分数</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>语文</td>
|
||||
<td><input v-model="chinese" type="text"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>数学</td>
|
||||
<td><input v-model="math" type="text"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>英语</td>
|
||||
<td><input v-model="english" type="text"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>总分</td>
|
||||
<td><input :value="total" readonly></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>平均分</td>
|
||||
<td><input :value="average" readonly></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp } = Vue;
|
||||
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
chinese: 0,
|
||||
math: 0,
|
||||
english: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
total() {
|
||||
let c = Number(this.chinese) || 0;
|
||||
let m = Number(this.math) || 0;
|
||||
let e = Number(this.english) || 0;
|
||||
return c + m + e;
|
||||
},
|
||||
average() {
|
||||
return Math.floor(this.total / 3);
|
||||
}
|
||||
}
|
||||
}).mount("#app");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
105
vue5.html
Normal file
105
vue5.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Vue3 小型购物车</title>
|
||||
<script src="https://unpkg.com/vue@3"></script>
|
||||
<style>
|
||||
table thead tr {
|
||||
background-color: #ffebcd;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 0 auto;
|
||||
border: 1px solid #989898;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid #989898;
|
||||
text-align: center;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0 2px;
|
||||
padding: 2px 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<h2>购物车表格</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>书籍名称</th>
|
||||
<th>出版日期</th>
|
||||
<th>价格</th>
|
||||
<th>购买数量</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(book, index) in books" :key="book.id">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ book.name }}</td>
|
||||
<td>{{ book.date }}</td>
|
||||
<td>￥{{ book.price.toFixed(2) }}</td>
|
||||
<td>
|
||||
<button @click="increase(book)">+</button>
|
||||
{{ book.count }}
|
||||
<button @click="decrease(book)">-</button>
|
||||
</td>
|
||||
<td>
|
||||
<button @click="remove(index)">移除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 style="text-align:center;">总价：￥{{ totalPrice.toFixed(2) }}</h3>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp } = Vue;
|
||||
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
books: [
|
||||
{ id: 1, name: '《JavaScript程序设计》', date: '2022-9', price: 85.0, count: 1 },
|
||||
{ id: 2, name: '《C语言基础》', date: '2021-2', price: 59.0, count: 1 },
|
||||
{ id: 3, name: '《Java高级语言编程》', date: '2022-10', price: 39.0, count: 1 },
|
||||
{ id: 4, name: '《数据库原理》', date: '2023-3', price: 128.0, count: 1 },
|
||||
{ id: 5, name: '《计算机网络》', date: '2022-8', price: 88.0, count: 1 }
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
totalPrice() {
|
||||
return this.books.reduce((sum, book) => sum + book.price * book.count, 0);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
increase(book) {
|
||||
book.count++;
|
||||
},
|
||||
decrease(book) {
|
||||
if (book.count > 1) book.count--;
|
||||
},
|
||||
remove(index) {
|
||||
this.books.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}).mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
184
vue6.html
Normal file
184
vue6.html
Normal file
@@ -0,0 +1,184 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>任务六 简易计算器</title>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Microsoft YaHei", sans-serif;
|
||||
background: linear-gradient(135deg, #e3f2fd, #bbdefb);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
padding: 30px 50px;
|
||||
text-align: center;
|
||||
width: 380px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 20px;
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
input, select, button {
|
||||
padding: 8px;
|
||||
margin: 8px 0;
|
||||
width: 80%;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ccc;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
input:focus, select:focus {
|
||||
outline: none;
|
||||
border-color: #42a5f5;
|
||||
box-shadow: 0 0 5px rgba(66,165,245,0.4);
|
||||
}
|
||||
|
||||
button {
|
||||
background: #42a5f5;
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
background: #1e88e5;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.result {
|
||||
margin-top: 15px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #d32f2f;
|
||||
margin-top: 10px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
text-align: left;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: disc;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.history {
|
||||
margin-top: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="container">
|
||||
<h2>任务六 简易计算器</h2>
|
||||
|
||||
<p>请输入第一个数：</p>
|
||||
<input type="text" v-model.trim="num1" placeholder="支持小数与负数">
|
||||
|
||||
<p>
|
||||
<select v-model="op">
|
||||
<option value="+">＋</option>
|
||||
<option value="-">－</option>
|
||||
<option value="*">×</option>
|
||||
<option value="/">÷</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>请输入第二个数：</p>
|
||||
<input type="text" v-model.trim="num2" placeholder="支持小数与负数">
|
||||
|
||||
<p><button :disabled="!num1 || !num2" @click="calculate">计算</button></p>
|
||||
|
||||
<div class="result" v-if="result !== null">
|
||||
得出结果：{{ result }}
|
||||
</div>
|
||||
|
||||
<p class="error">{{ errorMsg }}</p>
|
||||
|
||||
<div class="history" v-if="history.length > 0">
|
||||
<h3>历史记录（最近5次）</h3>
|
||||
<ul>
|
||||
<li v-for="(item, index) in history" :key="index">{{ item }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp } = Vue;
|
||||
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
num1: '',
|
||||
num2: '',
|
||||
op: '+',
|
||||
result: null,
|
||||
errorMsg: '',
|
||||
history: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
isValidNumber(val) {
|
||||
return /^-?\d+(\.\d+)?$/.test(val);
|
||||
},
|
||||
calculate() {
|
||||
this.errorMsg = '';
|
||||
this.result = null;
|
||||
|
||||
if (!this.isValidNumber(this.num1) || !this.isValidNumber(this.num2)) {
|
||||
this.errorMsg = '请输入合法的数字（支持小数与负数）。';
|
||||
return;
|
||||
}
|
||||
|
||||
let a = parseFloat(this.num1);
|
||||
let b = parseFloat(this.num2);
|
||||
|
||||
if (this.op === '/' && b === 0) {
|
||||
this.errorMsg = '除数不能为 0。';
|
||||
return;
|
||||
}
|
||||
|
||||
let res;
|
||||
switch (this.op) {
|
||||
case '+': res = a + b; break;
|
||||
case '-': res = a - b; break;
|
||||
case '*': res = a * b; break;
|
||||
case '/': res = a / b; break;
|
||||
}
|
||||
|
||||
this.result = Math.round(res * 100) / 100; // 保留两位小数
|
||||
|
||||
// 添加历史记录
|
||||
this.history.unshift(this.result);
|
||||
if (this.history.length > 5) this.history.pop();
|
||||
}
|
||||
}
|
||||
}).mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user