用Vue做个简单的比较两个数字的大小页面
时间：2024-04-17 11:40:27 来源：网络cs 作者：言安琪 栏目：运营工具 阅读：
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 largenum2Size: "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获取焦点就清空txthandleFocus() {this.txt = ''}}})</script></body></html>
本文链接：https://www.kjpai.cn/news/2024-04-17/159733.html，文章来源：网络cs，作者：言安琪，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。