用Vue做个的比较两个数字的大小页面
1、 考核知识点
创建vue实例和对v-model内置指令的使用
2、 练习目标
创建vue实例
掌握v-model内置指令的使用。
3、 需求分析
初始状态下,“比较”按钮不可点击,输入一个数字,按钮仍然不可点击,当两个数字输入完后,按钮变为可点击状态;点击下方“比较”按钮,显示比较结果,大的那一边字体变大,小的那边字体变小,相等的话字体一样大:
4、 案例分析
我们用两个数字来比较:
1.初始状态下,“比较”按钮不可点击,界面如下:
2.输入一个数字,按钮仍然不可点击,当两个数字输入完后,按钮变为可点击状态:
3.点击下方“比较”按钮,显示比较结果,大的那一边字体变大,小的那边字体变小,相等的话字体一样大:
代码如下:
-
-
<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>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhcgkbia
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13