用vue做简单的计算器,vue 计算器
这篇文章主要为大家详细介绍了某视频剪辑软件实现简单网页计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现简单网页计算器的具体代码，供大家参考，具体内容如下
案例描述
1、 考核知识点
2、 创建vue实例和对v-model内置指令的使用
3、 练习目标
创建某视频剪辑软件实例。
掌握v型车内置指令的使用。
4、 需求分析
用户通过选择计算方法和数据输入，得到计算结果。
5、 案例分析
效果如图所示：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题计算器/标题
脚本src= vue。js /脚本
风格。结果{
字体大小：30px
}
/风格
/头
身体
div id=应用程序
！-定义页面结构-
div class=calc
输入类型=收音机值=1 v-model=付豪/加法
输入类型=收音机值=2 v-model=付豪/减法
输入类型=收音机值=3 v-model=付豪/乘法
输入类型=收音机值=4 v-model=付豪/除法
保险商实验所
里
数据1:输入类型=text v-model=num1
/李
里
数据2:输入类型=text v-model=num2
/李
里
输入类型=按钮值=计算@click=calc()
/李
/ul
div class=result 结果：{{result}}/div
/div
/div
脚本
var vm=new Vue({
埃尔： #app ，
//定义初始数据
数据：{
付豪："1",
num1: ，
num2: ，
结果：""
},
//定义事件处理函数计算
方法：{
calc() {
如果(!this.num1 ！this.num2) {
this.result=输入的数不能为空
}否则{
if (this.fuhao==1) {
这个。结果=parse int(this。num 1)解析int(this。数字2)
}
如果(this.fuhao==2) {
这个。结果=parse int(this。num 1)-parse int(this。数字2)
}
如果(this.fuhao==3) {
这个。结果=parse int(this。num 1)* parse int(this。数字2)
}
如果(this.fuhao==4) {
这个。结果=parse int(this。num 1)/parse int(this。数字2)
}
}
}
}
})
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。