vue中实现计算器

最新推荐文章于 2024-04-30 17:26:41 发布
最新推荐文章于 2024-04-30 17:26:41 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： vue 文章标签： 计算器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31293575/article/details/81120374
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
</head>
<body>
    <!--容器-->
    <div id="app">
        <input type="text" v-model="n1">
        <select v-model="type">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2">
        <input type="button" value="=" @click="cal">
        <input type="text" v-model="result">
    </div>

<script>
    // 创建一个vue实例
    var vm=new Vue({
        el:'#app',  // 绑定id为appid容器
        data:{
            n1:0,
            n2:0,
            type:'-',
            result:''
        },
        methods:{
            cal(){
                console.log("adsf");
                switch (this.type){
                    case '+':
                        this.result=parseInt(this.n1)+parseInt(this.n2);
                        break;
                    case '-':
                        this.result=parseInt(this.n1)-parseInt(this.n2);
                        break;
                    case '*':
                        this.result=parseInt(this.n1)*parseInt(this.n2);
                        break;
                    case '/':
                        this.result=parseInt(this.n1)/parseInt(this.n2);
                        break;
                }
            }
        }
    })
</script>
</body>
</html>

效果：

原文请参考：http://blog.maptoface.com/post/90

全职计算机毕业设计
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue实现手机计算器
10-14
以上就是使用Vue实现手机计算器的基本步骤。通过这种方式，我们可以创建一个交互式的计算器应用，允许用户输入数学表达式，进行基本的算术运算，同时处理特殊操作如正负数转换和百分比计算。在实际开发中，还需要...
用VUE实现计算器四种方法
weixin_64688373的博客
04-02 4220
每当这些属性中的任何一个发生变化时，监视器函数将调用方法来重新计算结果，并更新数据属性中的值。函数中使用了一个switch语句，根据opt变量的不同值，分别执行加法、减法、乘法或除法，并将结果赋值给变量num3。2，计算属性根据选择的操作符将两个数字进行计算，并将结果返回给HTML中的输出元素。4.1，HTML代码不变，两个输入数值的输入框和输出元素的表单，一个基础的vue实例化。1，HTML代码定义了一个输入和输出元素，两个输入框，使用下拉框，选择运算符。三，使用方法（methods）实现简易的计算器。
vue+element实现计算器
敲代码无敌小奶龙的博客
02-07 1735
vue+element实现计算器
Vue3+Pinia 实现计数器案例（#仅学习）
最新发布
BelleLinQ的博客
04-30 810
Pinia+Vu3： State/Getter/action的使用
vue+element-UI 简易计算器
ryyzxf的博客
10-30 1694
vue+element-UI 简易计算器效果图代码 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 引入样式 --> <link rel="stylesh
elementUI计数器的坑，绑定对象属性后竟然只能加1？
bug_xu的博客
04-04 424
然后发现加一就不能加了，而且还不能减。
【用Vue实现计算器】
m0_72355786的博客
08-07 5407
在实际项目开发中，不仅仅只是将模型准确的渲染到视图中，视图中的数据的变化，更需要模型去进行有效的记录。所以我们需要使用双向数据绑定的机制。使用v-model可以对数据进行双向的绑定操作。值得注意的是，由于记载页面元素值得需求都是发生在表单元素中，所以v-model只能运用在表单元素中。所谓的双向数据绑定指的是，不仅仅只是从M取得数据渲染到V，还可以从V的变化动态的更新M的值。在body中建立一个被vue控制的元素区，id属性值会被vue所引用。第一步：引入vue框架。...
Vue实现简易计算器
10-15
在本文中，我们将深入探讨如何使用Vue.js框架来创建一个简单的加减乘除计算器。Vue.js是一个轻量级的前端JavaScript框架，它以其组件化、响应式数据绑定和易用性而闻名。以下是对实现这个简易计算器的关键知识点的...
vue实现计算器功能
12-28
本文实例为大家分享了vue实现计算器功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>计算器</title> [removed...
Vue实现计算器计算效果
10-14
在本文中，我们将探讨如何使用Vue.js框架来实现一个基本的计算器应用。...当然，实际应用中可能需要考虑更多细节，如错误处理、小数点输入、百分比计算等，但以上代码足以展示Vue实现计算器的基本思路。
使用Vue实现简单计算器
10-15
在本文中，我们将深入探讨如何使用Vue.js框架来创建一个简单的计算器应用。Vue.js是一个流行的前端JavaScript框架，它提供了一种声明式的数据绑定和组件化的方法，使得开发用户界面更加容易和直观。在这个实例中，...
使用Vue.js及Element编写的精度浮点运算计算器源码（打开运行）
12-16
主要是Vue的一些简单应用，难点在于浮点运算。由于javascript的浮点运算是不精确的（对于大多数编程语言都是这样），此程序使用整数来代替浮点数进行运算，最后再转化为浮点数，可以实现对设置范围内（运算范围在程序中为自定义变量range）的浮点运算实现精度运算。
Vue实现计算器（一看就懂）
Lycxiaobai的博客
02-23 5910
**这个计算器其实是我老师布置的一个作业，捉摸着搞了那么久的东西不能浪费了吧，于是我分享下我的代码和大概思路** 给个关注点个赞，后续我会分享更多我们学生党的作业问题 白嫖党们先看代码，我就先上上全代码，干！ <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>计算器</title> <!-- 引入Vue --> <script t
vue中实现简易计算器
PinelliaLogic的博客
01-26 752
纯前端代码实现计算器小组件
使用Vue.js做简易计算器
m0_55853116的博客
03-22 1300
使用Vue.js做简易计算器 1.引入Vue.js包 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 2.Html 布局代码 <div id="app"> <input type="text" v-model="num1" /> <select v-model="opt"> <option>
VUE实现计算器
m0_73497479的博客
04-03 477
/ 监听 num1、num2 和 operator 变化，重新计算结果。// 根据 operator 执行相应的运算。-- 引入 Vue.js 库 -->-- 输入第一个数字 -->-- 输入第二个数字 -->-- 显示计算结果 -->-- 选择操作符 -->
vue 浮点型乘除法精确计算
热门推荐
攻防人生3722的博客
03-06 1万+
在js里直接使用乘法*得到的结果是不精确的，错误的。例如：0.0056*100=0.559999 很明显这个结果是错误的。 那么如何计算加减乘除呢？在vue 里. 乘法计算，使用的话也很简单 &lt;p&gt; 【月息】{{NumberMul(0.0058,100)}}% &lt;...
【Vue实现简单的计算器】
weixin_64313784的博客
04-02 2366
vue使用三种方法实现一个简单的计算器
用vue做一个简单的网页计算器
yxnwx的博客
04-02 554
【代码】使用vue编译一个简单的网页计算器。
vue3.0实现计算器
05-13
下面是一个简单的 Vue3.0 计算器实现。可以进行加、减、乘、除四则运算。 ```html <template> <div> <input type="text" v-model="num1" /> <select v-model="opt"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" v-model="num2" /> <button @click="calculate">计算</button> <div>结果：{{ result }}</div> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const num1 = ref(0); const num2 = ref(0); const opt = ref('+'); const result = ref(0); const calculate = () => { switch (opt.value) { case '+': result.value = parseFloat(num1.value) + parseFloat(num2.value); break; case '-': result.value = parseFloat(num1.value) - parseFloat(num2.value); break; case '*': result.value = parseFloat(num1.value) * parseFloat(num2.value); break; case '/': result.value = parseFloat(num1.value) / parseFloat(num2.value); break; default: break; } }; return { num1, num2, opt, result, calculate, }; }, }; </script> ``` 在 `setup` 函数中，使用了 `ref` 函数来创建响应式数据。在 `calculate` 函数中，通过 `switch` 语句来实现四则运算。最终结果通过 `result` 变量绑定到模板中进行显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全职计算机毕业设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值