vue实现简易的计算器功能
更新时间：2021年11月25日 13:52:58 作者：温L
这篇文章主要为大家详细介绍了vue实现简易的计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现简易计算器功能的具体代码，供大家参考，具体内容如下
实现功能：将两个输入框中的值进行加减乘除计算
用到的知识点：
1.v-model数据双向绑定
2. .number转化为数字
3.@click点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
//选择自己的vue位置
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 将第一个值转换为数字 -->
<input type="number" v-model.number="num1"/>
<select v-model="str">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="number" v-model.number="num2"/>
<!-- 点击等号执行cal函数里的内容 -->
<button type="button" @click="calc">=</button>
<!-- 将结果输出 -->
<input type="text"/ v-model="num3">
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
// 初始输入框中的数值
num1:0,
num2:0,
num3:0,
str:'+'
},
methods:{
calc(){
if(this.str=="+"){
this.num3=this.num1+this.num2
}else if(this.str=="-"){
this.num3=this.num1-this.num2
}else if(this.str=="*"){
this.num3=this.num1*this.num2
}else if(this.str=="/"){
this.num3=this.num1/this.num2
}
}
}
})
</script>
</html>
结果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue3.0+vue-router+element-plus初实践
这篇文章主要介绍了vue3.0+vue-router+element-plus初实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
husky是一个git hooks工具（git的钩子工具，可以在特定时机执行特定的命令），这篇文章主要介绍了Vue3-基于husky的代码检查工作流,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue 路由判断方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了Vue使用vue-drag-resize生成悬浮拖拽小球，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了vue构建动态表单的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue使用require.context实现动态注册路由的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要为大家分享了一个非常实用的vue导航钩子，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了Vue中之nextTick函数源码分析,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了Vue仿今日头条实例详解，并把相关代码做了说明，对此有兴趣的朋友参考下吧。2018-02-02
下面小编就为大家分享一篇基于vue2.0动态组件及render详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论