用Vue做个的比较两个数字的大小页面

每天都要做的更好

2023-10-09 帮助1人

1、考核知识点
创建vue实例和对v-model内置指令的使用
2、练习目标
创建vue实例
掌握v-model内置指令的使用。
3、需求分析
初始状态下，“比较”按钮不可点击，输入一个数字，按钮仍然不可点击，当两个数字输入完后，按钮变为可点击状态；点击下方“比较”按钮，显示比较结果，大的那一边字体变大，小的那边字体变小，相等的话字体一样大：
4、案例分析

我们用两个数字来比较：

1.初始状态下，“比较”按钮不可点击，界面如下：

学新通

2.输入一个数字，按钮仍然不可点击，当两个数字输入完后，按钮变为可点击状态：

学新通

3.点击下方“比较”按钮，显示比较结果，大的那一边字体变大，小的那边字体变小，相等的话字体一样大：

学新通

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input demo</title>
<style>
.compare-val {
color: red;
}
.large {
font-size: 16px;
}
.default {
font-size: 14px;
}
.small {
font-size: 12px;
}
</style>
</head>
<body>
<div id="root">
<div>
<label>
<span>请输入第一个数: </span>
<input v-model.number="input1" @focus="handleFocus"/>
</label>
</div>
<div>
<label>
<span>请输入第二个数: </span>
<input v-model.number="input2" @focus="handleFocus"/>
</label>
</div>
<button @click="compareClick()" :disabled="input1.length === 0 || input2.length === 0">比较</button>
<div class="compare-val">
<span>比较的结果: </span>
<span v-show="input1 && input2 && txt">
<span :class="num1Size">第一个数</span><span>{{ txt }}</span><span :class="num2Size">第二个数</span>
</span>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: "#root",
data() {
return {
input1: "",
input2: "",
txt: "", // 大于，小于，等于
num1Size: "default", // default small large
num2Size: "default"
}
},
methods: {
// 比较input1和input2值
compareClick() {
if (this.input1 > this.input2) {
this.txt = '大于'
this.num1Size = "large"
this.num2Size = "small"
} else if (this.input1 < this.input2) {
this.txt = '小于'
this.num1Size = "small"
this.num2Size = "large"
} else {
this.txt = '等于'
this.num1Size = "default"
this.num2Size = "default"
}
},
// 当input1或者input2获取焦点就清空txt
handleFocus() {
this.txt = ''
}
}
})
</script>
</body>
</html>

这篇好文章是转载于：学新通技术网

用Vue做个的比较两个数字的大小页面

photoshop蒙版画笔没反应怎么办

微信小程序没声音怎么办

微信提示登录环境异常是什么意思原因

excel图片置于文字下方的方法

微信运动停用后别人还能看到步数吗

使用云服务器搭建个人游戏加速器教程

微信人名旁边有个图标有什么用

Excel筛选和排序是灰色的怎么办

抖音国际版要用什么加速器能流畅刷Tiktok的加速器

键盘上的负数是哪个键