Vue实现计算器（一看就懂）

已于 2022-07-27 13:16:42 修改
阅读量5.7k 收藏 54
点赞数 6
文章标签： vue.js javascript 前端
于 2022-02-23 17:16:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lycxiaobai/article/details/123094818
版权

在这里插入图片描述

这个计算器其实是我老师布置的一个作业，捉摸着搞了那么久的东西不能浪费了吧，于是我分享下我的代码和大概思路

给个关注点个赞，后续我会分享更多我们学生党的作业问题
白嫖党们先看代码，我就先上上全代码，干！

<head>
    <meta charset="UTF-8">
    <title>计算器</title>

    <!-- 引入Vue -->
        <script type="text/javascript" src="../jquery.js"></script>
        <script type="text/javascript" src="../vue.js"></script>
</head>
<!-- input框中内容从右边显示 -->
    <style>
        input{
            width: 327px;
            height: 80px;
            font-size: 50px;
            text-align: right;
        }
        button{
            width: 80px;
            height: 80px;
        }  
    </style>
<body>
    <!-- 设置输入框的长度和大小 -->
<div id="root" class="root">
    <input id="inputs" type="text" placeholder="0" disabled="disabled" v-model="zhi">
        <!-- 设置按键的宽和高 -->
        <div id="forcat" >
            <button @click="cls()"  >AC</button>
            <button @click="zhengfu('')"  >+/-</button>
            <button @click="tuige()" >⬅</button>
            <button @click="addStr('/')"  >÷</button><br>
            <button @click="addStr(7)"  >7</button>
            <button @click="addStr(8)"  >8</button>
            <button @click="addStr(9)"  >9</button>
            <button @click="addStr('*')">×</button><br>
            <button @click="addStr(4)"  >4</button>
            <button @click="addStr(5)"  >5</button>
            <button @click="addStr(6)"  >6</button>
            <button @click="addStr('-')"  >-</button><br>
            <button @click="addStr(1)"   >1</button>
            <button @click="addStr(2)"  >2</button>
            <button @click="addStr(3)"  >3</button>
            <button @click="addStr('+')"  >+</button><br>
            <button @click="addStr(0)" style="width: 165px; height: 80px;" >0</button>
            <button @click="addStr('.')"  >.</button>
            <button @click="calc()"  style="background-color:cornflowerblue;" >=</button>
    </div>
</div>
    <script type="text/javascript">
        // 这两行代码可以略过（Vue中的配置，不一定每个人都要）
            Vue.config.productionTip = false;
            Vue.config.devtools = true;
            new Vue({
                el:'#root',
                data:{
                    zhi:"",
                },
                methods:{
                	//  在这里也可以直接使用this.
                    //  在input框内可以输入值
                    addStr:function(s){
                        var vars = document.getElementById("inputs");
                        vars.value = vars.value + s;                                
                    },
                    //    计算input框内输入的值计算加减乘除
                    calc:function(){
                        var vars = document.getElementById("inputs");
                        val = eval(vars.value);
                        vars.value = val;
                    },
                    // input框内删减，退格
                    tuige:function(){              
                        this.zhi = this.zhi.substr(0,this.zhi.length-1);
                    },
                    //    清除input框中的内容
                    cls:function(){
                        var vars = document.getElementById("inputs");
                        vars.value = "";
                    },
                    //    每次点击正负值都会 * -1
                    zhengfu:function(){
                        var vars = document.getElementById("inputs");
                        var str = vars.value * -1;
                        vars.value = str;
                    }                
                }
            });
    </script>
</body>
<html>

测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行
测试大于10个字的行大于10行

我是码农lyc
关注
  • 6
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Vue实现手机计算器
11-19
本文实例为大家分享了Vue制作仿手机计算器的具体代码，供大家参考，具体内容如下 1.首先是把样式做出来，按钮是0-9，还有加减乘除，百分号，清除按钮，小数点，等号、等等 2.把官方网站的JS插件引用，cn.vuejs.org/v2/guide/ 页面视图 JS new Vue({ el: "#app", data: { equation: '0', isDecimalAdded: false, //防止在一组数字中间输入超过一个小数位 isOperatorAdded: false, //判断之否已点击 加、减、乘、除，防止连续点击超过一个运算符
Vue实现自定义计算器
OpenSource_的博客
10-26 593
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Vue实现自定义计算器</title> <!--引进Css样式码--> <linkrel=stylesheethref="./d-1.css"> </head> <body&gt...
使用vue制作一个计算器
最新发布
qq_66996090的博客
04-07 619
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" href="styles.css"> </head> &l
vuex简易计算器(使用下拉框)
m0_72189003的博客
10-19 281
vuex简易计算器(使用下拉框)
用VUE实现计算器四种方法
weixin_64688373的博客
04-02 4185
每当这些属性中的任何一个发生变化时，监视器函数将调用方法来重新计算结果，并更新数据属性中的值。函数中使用了一个switch语句，根据opt变量的不同值，分别执行加法、减法、乘法或除法，并将结果赋值给变量num3。2，计算属性根据选择的操作符将两个数字进行计算，并将结果返回给HTML中的输出元素。4.1，HTML代码不变，两个输入数值的输入框和输出元素的表单，一个基础的vue实例化。1，HTML代码定义了一个输入和输出元素，两个输入框，使用下拉框，选择运算符。三，使用方法（methods）实现简易的计算器。
VUE实现计算器
m0_73497479的博客
04-03 470
/ 监听 num1、num2 和 operator 变化，重新计算结果。// 根据 operator 执行相应的运算。-- 引入 Vue.js 库 -->-- 输入第一个数字 -->-- 输入第二个数字 -->-- 显示计算结果 -->-- 选择操作符 -->
使用Vue三种方法实现简单计算器
2201_75939414的博客
04-02 3387
4:Vue.js使用@click指令绑定一个点击事件，并调用pd()方法，根据用户输入的数字和操作符计算结果，并将结果保存到result变量中。使用v-model指令将result变量的值绑定到结果显示输入框中，从而实现实时更新结果。代码实现了一个简单的计算器，用户可以在输入框中输入两个数字，选择一个操作符，并点击“等于”按钮，Vue.js会根据用户的输入进行计算，并将结果显示在另一个输入框中。2:methods属性中定义了一个方法pd()，用于根据用户的输入计算结果，并将结果保存到result变量中。
【Vue实现简单的计算器】
weixin_64313784的博客
04-02 2350
vue使用三种方法实现一个简单的计算器
使用vue做简单的计算器
W_Nuyoah的博客
04-03 1680
1.2 定义一个id为app的盒子，盒子内放两个文本框，行内放一个placeholder属性提示文本框内容；分别用v-model属性进行双向绑定，方便后面的调用。3.监听器实现方法，监听输入的两个数字，第一个字数字先存到结果里面，第二个数字根据运算符的不同，实现不同运算结果的存入。1.3 声明一个对象，对象内规定作用范围、声明要使用的属性；函数方法和计算方法差不多，只不过函数方法需要使用绑定事件绑定在一个按钮上，点击才能实现函数效果。使用vue学三种简单的计算器。1.1先引入vue.js。
Vue实现计算器计算效果
10-14
在本文中，我们将探讨如何使用Vue.js框架来实现一个基本的计算器应用。Vue.js是一个轻量级的前端JavaScript框架，它提供了数据绑定和组件化的能力，使得构建用户界面变得更为简单。下面我们将详细讲解实现计算器的...
vue实现计算器功能
12-28
本文实例为大家分享了vue实现计算器功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>计算器</title> [removed...
Vue实现简易计算器
10-15
在本文中，我们将深入探讨如何使用Vue.js框架来创建一个简单的加减乘除计算器。Vue.js是一个轻量级的前端JavaScript框架，它以其组件化、响应式数据绑定和易用性而闻名。以下是对实现这个简易计算器的关键知识点的...
【用Vue实现计算器】
m0_72355786的博客
08-07 5399
在实际项目开发中，不仅仅只是将模型准确的渲染到视图中，视图中的数据的变化，更需要模型去进行有效的记录。所以我们需要使用双向数据绑定的机制。使用v-model可以对数据进行双向的绑定操作。值得注意的是，由于记载页面元素值得需求都是发生在表单元素中，所以v-model只能运用在表单元素中。所谓的双向数据绑定指的是，不仅仅只是从M取得数据渲染到V，还可以从V的变化动态的更新M的值。在body中建立一个被vue控制的元素区，id属性值会被vue所引用。第一步：引入vue框架。...
VUE之简单计算器
m0_74913905的博客
05-06 481
今天分享两种方法实现简单计算器，使用者输入两个数字，点击按钮后，得出计算后的结果。
使用vue实现计算器
2301_77143733的博客
04-02 820
1.1在html中用div定义两个输入，使用两个v-model绑定输入的两个输入值，option实现下拉框，用来选择加减乘除，并用number改变输入值为数字类型。1.2添加按钮并设置点击事件。1.3写methods方法内容：使用switch语句，根据opt变量的不同会执行加减乘除中的一种，直接将结果给result。1.4效果图。
vue.js实现一个计算器
读书就是赚钱
03-06 9270
git:https://git.oschina.net/jjtHappy/js_caculator.git为了学习vue.js，把一个基于js实现的计算器转换为vue.js单页应用模式。 此次实操旨在学会运用vue.js，不注重计算器的样式，逻辑 先简单的看一下基于js实现的计算器是怎样的1、html//只截取body里面的内容 <body> <div id="calcuator"> <
使用Vue.js开发计算器
DevCorner的Pro技术博客
06-01 487
至此，我们已经完成了一个使用Vue.js构建的计算器应用程序。这个简单的例子向我们展示了在Vue.js应用程序中如何使用数据绑定和计算属性、方法，以及if指令等概念。讲述的同时，我也借助MarkDown语法为您提供了清晰而简洁的代码解释与介绍。链接到GitHub上完整的项目源代码，如果感兴趣的话可以去研究一下，并亲手试验一下各种情况😉。
【VUE】实现一个定制化公式计算器
qq_48468636的博客
10-11 1441
如何自己制作一个计算器？只需在页面中自定义一块区域，放上你需要在计算器中展示的按钮以及计算器的显示屏。 此处我们放置的是最基础的正负号、四则运算符号，以及AC清除、百分号、小数点和单个删除键。
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` 变量绑定到模板中进行显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

我是码农lyc

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

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

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

打赏作者

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

抵扣说明：

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

余额充值