Vue怎么实现简单网页计算器

魁首哥

作者

Vue怎么实现简单网页计算器

这篇文章主要介绍“Vue怎么实现简单网页计算器”，在日常操作中，相信很多人在Vue怎么实现简单网页计算器问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue怎么实现简单网页计算器”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

案例描述

1、考核知识点

2、创建vue实例和对v-model内置指令的使用

3、练习目标

创建vue实例。
掌握v-model内置指令的使用。

4、需求分析

用户通过选择计算方法和数据输入，得到计算结果。

5、案例分析

效果如图所示：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>计算器</title><scriptsrc="vue.js"></script><style>.result{font-size:30px;}</style></head><body><divid="app"><divclass="calc"><inputtype="radio"value="1"v-model="fuhao"/>加法<inputtype="radio"value="2"v-model="fuhao"/>减法<inputtype="radio"value="3"v-model="fuhao"/>乘法<inputtype="radio"value="4"v-model="fuhao"/>除法<ul><li>数据1：<inputtype="text"v-model="num1"></li><li>数据2：<inputtype="text"v-model="num2"></li><li><inputtype="button"value="计算"@click='calc()'></li></ul><divclass="result">结果：{{result}}</div></div></div><script>varvm=newVue({el:'#app',//定义初始数据data:{fuhao:'1',num1:'',num2:'',result:''},//定义事件处理函数Calcmethods:{calc(){if(!this.num1||!this.num2){this.result='输入的数不能为空'}else{if(this.fuhao==1){this.result=parseInt(this.num1)+parseInt(this.num2)}if(this.fuhao==2){this.result=parseInt(this.num1)-parseInt(this.num2)}if(this.fuhao==3){this.result=parseInt(this.num1)*parseInt(this.num2)}if(this.fuhao==4){this.result=parseInt(this.num1)/parseInt(this.num2)}}}}})</script></body></html>

到此，关于“Vue怎么实现简单网页计算器”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注恰卡编程网网站，小编会继续努力为大家带来更多实用的文章！

阅读全文

发布于 2022-04-15 22:30:26

vue