使用v-model和eval函数实现我的计算器

最新推荐文章于 2024-04-18 16:58:47 发布
最新推荐文章于 2024-04-18 16:58:47 发布
阅读量494 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43803985/article/details/97681314
版权

在实现我的计算器小程序中，需要注意以下几个细节

  • v-model：使用的格式为 v-model=" "。使用等于号
  • 在下拉列表中option要写上 value=" "
  • 在script中的methods方法中，使用data中的数据，要使用this关键字，否则不能识别
  • eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。虽然可以简化代码，但不支持多次使用

实例，使用switch方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算器</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="n1">
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2">
        <input type="button" value="=" @click="calc">
        <input type="text" v-model="result">

    </div>


    <script>
        new Vue({
            el: '#app',
            data: {
                n1: 0,
                n2: 0,
                result: 0,
                opt: '+'
            },
            methods: {
                calc() {
                    switch (this.opt) {
                        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>

实例 使用eval()函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算器</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="n1">
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2">
        <input type="button" value="=" @click="calc">
        <input type="text" v-model="result">

    </div>


    <script>
        new Vue({
            el: '#app',
            data: {
                n1: 0,
                n2: 0,
                result: 0,
                opt: '+'
            },
            methods: {
                calc() {
                     this.result=eval('parseInt(this.n1) ' +this.opt+ ' parseInt(this.n2)');
                }

            }
        })
    </script>
</body>

</html>
阿旺你好啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue怎么使用eval_eval()的使用和兼容性问题
weixin_39548733的博客
12-19 2768
eval()的使用eval() 函数可将字符串转换为代码执行，并返回一个或多个值eval调用时，实例为eval( "( javascript代码 )" )eval()的返回值eval()的返回值遵循以下规则：如果eval()的参数不是字符串，那么eval()将直接返回参数。如果eval()的参数是字符串，那么eval()将这个字符串解析成代码后进行执行，并返回最后一行代码执行的结果。如果字符串无法...
在vue里面使用eval_请问在vue项目内如何使用
weixin_39528219的博客
12-21 1533
像```import key from 'akeyboard/indexVue'……components: {'a-keyboard': key.aKeyboardVue.keyboard},```这样会报错```TypeError: Cannot read property 'keyboard' of undefinedat eval (webpack-internal:///./node_mo...
在vue里面使用eval（）函数
汤玉鹏
07-29 6582
eval()： 作用：它的作用是把对应的字符串解析成js代码并运行(将json的字符串解析成为JSON对象)； 特点：它是一个全局函数； 缺点：1>在该函数内部申明的变量都是全局变量，且申明的变量不会提升； 2>耗性能，执行2次，一次解析成js语句，一次执行js代码； 举例： 自身定义的函数，通过动态的赋值 xTable${index}` 以上代码返回的是一个字符串，并不能调取定义的方法 let a=[`xTable${index}`]; console.log
vue3【实用教程】v-model（含给 v-model 添加参数，绑定多个 v-model ，v-model 的内置修饰符，自定义 v-model 的修饰符等）
最新发布
朝阳39的博客
04-18 3442
以为例：自动将第一个字母转为大写具体实现详见注释-- 选项式 API --> < script > export default {props : {modelValue : String , // 新增了名 modelModifiers 的 prop，用于获取自定义的修饰符 modelModifiers : {
将字符串1/4转换成0.25 eval（）
weixin_45799001的博客
12-14 237
eval(string) 必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。 eval("2+3") // 返回 5
Vue系列教程（八）v-model实现计算器案例
Hit the keyboard hard
02-11 639
已经学习完v-model指令后，我们这篇博客做一个简易的计算器 推荐阅读： Vue系列教程（一）基础介绍 Vue系列教程（二）v-cloak、v-text、v-html的基本使用 Vue系列教程（三）v-bind指令 Vue系列教程（四）v-on指令定义事件 Vue系列教程（五）跑马灯效果案例 Vue系列教程（六）事件修饰符 Vue系列教程（七）v-model和双向数据绑定 ...
vue-model实现简易计算器
10-14
在本文中，我们将深入探讨如何使用Vue.js的`v-model`特性来实现一个简单的计算器。Vue.js是一个流行的前端JavaScript框架，它提供了数据绑定和组件化的能力，使得开发用户界面更加容易。`v-model`是Vue中用于双向...
vue.js实现的经典计算器/科学计算器功能示例
10-18
在这个示例中，我们将探讨如何使用Vue.js实现一个经典计算器和科学计算器的功能。首先，我们要了解Vue.js的基础，包括组件、指令、事件处理和数据绑定。 1. **组件化**： Vue.js的核心特性之一是组件化，这使得...
vue.js实现简单的计算器功能
10-15
在这个计算器应用中，有两个输入框（`<input type="text" v-model="n1"` 和 `<input type="text" v-model="n2">`）用于输入数字，一个下拉选择框（`<select v-model="opt">`）用于选择运算符（加、减、乘、除），一...
计算器：使用HTML，CSS和JavaScript的简单计算器
02-23
4. 当用户按下等于号按钮时，JavaScript解析计算表达式，使用内置的数学函数（如`eval()`或自定义的计算函数）进行计算，并将结果显示在显示屏上。 5. 在处理过程中，JavaScript还需要处理一些特殊的情况，例如连续...
v-model的基本使用与原理
weixin_54327001的博客
11-24 749
为了实现双向绑定，我们使用v-on的input事件，每次input都调用valueChange函数。valueChange函数参数是input事件发生时，浏览器自动生成的event。改变文本框内内容时，后面的文本不随之改变，因为此时message没有改变。上述内容的更简便写法，不使用函数，直接在v-on中书写具体操作。当删除输入框内文本时，输入框后文字也随之改变。至此，已通过v-bind与v-on实现双向绑定。改变message值，输入框内文字随之改变。
vue 入门，v-model数据绑定
05-03
NULL 博文链接：https://fanshuyao.iteye.com/blog/2434373
全网最详细的v-model讲解
热门推荐
zayyo的博客
11-29 15万+
v-model的基本使用 表单提交是开发中非常常见的功能，也是和用户交互的重要手段： 比如用户在登录、注册时需要提交账号密码； 比如用户在检索、创建、更新信息时，需要提交一些数据； 这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成： v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定； 它会根据控件类型自动选取正确的方法来更新元素； 尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据
[记错]vue使用eval方法报错：Uncaught (in promise) SyntaxError:Unexpected end of input
小龙哒的博客
06-04 1万+
网上我也看了一堆博客，都是一个问题，说没有写结尾(),我的代码如下： 前端输出都可以输出的没问题，为什么说这个错误呢？ 问题在于，拼接了三个动态参数 这三个动态参数可能为空字符串，虽然我做了不等于undif的判断，不过还是没用 如果是前两个是空窜，会报错 Uncaught (in promise) SyntaxError: Unexpected token "." 那么，解决方案来了 采用...
eval的使用方法
tangcc的博客
10-07 4744
eval方法可以将任何字符串参数（只能是字符串）重新运算 1.局部申明 eval(" var a = 1")   // 不要用let const来申明变量 2.全局申明 window.eval("var a = 1") 3.返回值，如果eval(json)那么里面要再加一对括号; 写法一：let b = eval("(a =1)") // b =1  写法二：let b = eval...
Vue - v-model
qq_33962481的博客
07-30 347
文章目录 # 一、
利用eval函数实现简单的计算器
weixin_30662109的博客
02-20 1223
""" description : use python eval() function implement a simple calculator functions can be used as follow： ---------------------------------------- + : addition - : minus * : multiplicat...
js中关于eval（）方法，写了一个计算器小例子
赫兹焦耳的博客
05-10 2885
    有的时候获取到的数值是 string 类型可以转换为number 但有时会得到string类型的表达式，然后发现了eval（）这个函数很方便啊===================================================引用定义和用法eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。如果参数是一个表达式，eval() 函数将执行表达式。...
【JavaScript】javascript的eval函数实现的一个简单计算器
不积跬步无以成千里
01-12 2042
初学H5，不知道做什么来练手，就做些小工具吧今天知道一个函数eval()，感觉是神器，不过官方说这个已经很少用到了用它来做个计算器还是可以的吧~几个点：1、画圆圈，border-radius:100%;2、点击时改变CSS效果，.btnItem:active{}3、内容换行，word-wrap:break-word;4、字符串删除，inputtext.substring( 0 , inputtex
使用react实现简易计算器不能使用eval()
04-01
以下是一个可能的实现方式： ```jsx import React, { useState } from 'react'; function Calculator() { const [result, setResult] = useState(''); function handleButtonClick(value) { if (value === '=') { // 计算结果 try { const newResult = String(eval(result)); setResult(newResult); } catch (error) { setResult('错误'); } } else if (value === '清除') { // 清空结果 setResult(''); } else { // 添加输入 setResult(prevResult => prevResult + value); } } return ( <div> <input type="text" value={result} readOnly /> <table> <tbody> <tr> <td><button onClick={() => handleButtonClick('7')}>7</button></td> <td><button onClick={() => handleButtonClick('8')}>8</button></td> <td><button onClick={() => handleButtonClick('9')}>9</button></td> <td><button onClick={() => handleButtonClick('+')}>+</button></td> </tr> <tr> <td><button onClick={() => handleButtonClick('4')}>4</button></td> <td><button onClick={() => handleButtonClick('5')}>5</button></td> <td><button onClick={() => handleButtonClick('6')}>6</button></td> <td><button onClick={() => handleButtonClick('-')}>-</button></td> </tr> <tr> <td><button onClick={() => handleButtonClick('1')}>1</button></td> <td><button onClick={() => handleButtonClick('2')}>2</button></td> <td><button onClick={() => handleButtonClick('3')}>3</button></td> <td><button onClick={() => handleButtonClick('*')}>*</button></td> </tr> <tr> <td><button onClick={() => handleButtonClick('0')}>0</button></td> <td><button onClick={() => handleButtonClick('.')}>.</button></td> <td><button onClick={() => handleButtonClick('=')}>=</button></td> <td><button onClick={() => handleButtonClick('/')}>/</button></td> </tr> <tr> <td colSpan={4}><button onClick={() => handleButtonClick('清除')}>清除</button></td> </tr> </tbody> </table> </div> ); } export default Calculator; ``` 这个实现使用了一个名为 `result` 的状态来保存当前的计算结果。每次点击按钮时，都会调用 `handleButtonClick` 函数来更新 `result` 状态。 当点击等号时，会使用 `eval` 函数计算结果，并将结果保存到 `result` 状态中。注意，为了防止出现不安全的计算，这里使用了 `try...catch` 来捕获可能的错误，并将错误信息显示为“错误”。 当点击清除时，会简单地将 `result` 状态设置为空字符串。 在 JSX 中，我们创建了一个表格来显示按钮。每个按钮都有一个点击事件，当点击时会调用 `handleButtonClick` 函数，并传递对应的值作为参数。注意，我们不使用 `eval` 函数来计算结果。 这个实现还存在一些问题和不足，例如：没有支持括号、没有支持负数、没有支持科学计数法等等。但是，这个实现足以说明如何在 React 中实现一个简单的计算器。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值