v-model实现简单计算器

最新推荐文章于 2022-01-14 13:36:04 发布
最新推荐文章于 2022-01-14 13:36:04 发布
阅读量439 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45616246/article/details/105334318
版权

请陛下批阅

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="n1">
    <select v-model="opt">
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" value="=" @click="calculate">
    <input type="text" v-model="result">

</div>


</body>
<script>
    var vm = new Vue({
       el: '#app',
       data: {
           n1: '',
           n2: '',
           result: '',
           opt: '+'
       },
       methods: {
           calculate() {
               // eval()函数一般不建议使用
               var calcStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)';
               this.result = eval(calcStr);
           }
       }
    });
</script>
</html>
键盘的打工仔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue · v-model实现简易计算器
chez-moi
03-12 897
通过用v-model来实现简易计算器 【代码实现】 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue学习</title> <script src="https://cdn.jsdelivr.net/npm/vue/dis...
v-model制作简易计算器
Wrj6811的博客
11-04 427
<!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...
Vue学习笔记01day_06.简易计算器
xinpz的博客
09-11 211
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &amp
使用v-model实现简易计算机
Socraton的博客
12-24 189
<div id="app"> <input type="text" v-model="n1"> <select v-model="opt"> <option value="+">+</option> <option value="-">-<...
v-model双向绑定制作简易计算器
最爱喝怡宝的博客
11-10 761
通过双向绑定可以做出一个简易的计算器，代码如下： 样式部分： <div id="app"> <input type="text" v-model="num1"> <select name="" id="" v-model="option"> <option value="+">+</option> <option value="-">-</o
vue-model实现简易计算器
10-14
在本文中，我们将深入探讨如何使用Vue.js的`v-model`特性来实现一个简单的计算器。Vue.js是一个流行的前端JavaScript框架，它提供了数据绑定和组件化的能力，使得开发用户界面更加容易。`v-model`是Vue中用于双向...
Vue开发-实用vue实现简易计算器项目.zip
最新发布
05-09
在本项目中，我们将深入探讨如何使用Vue.js框架来实现一个简易计算器。Vue.js是一个流行的前端JavaScript库，它以其易学易用、组件化和灵活的特性受到开发者们的喜爱。这个"Vue开发-实用vue实现简易计算器项目"旨在...
simplycalculatorvuejs一个用vuejs实现简易计算器
08-10
标题"simplycalculatorvuejs一个用vuejs实现简易计算器"和描述"simply-calculator-vuejs 一个用vue.js实现简易计算器"暗示了我们将在Vue.js环境下创建一个基本的计算工具。 首先，让我们了解一下Vue.js的基础知识。...
Vue实现简易计算器
10-15
以下是对实现这个简易计算器的关键知识点的详细解释： 1. **Vue实例**： 在代码中，我们首先创建了一个Vue实例，`var v = new Vue({ ... })`，这定义了一个Vue应用程序，并指定了挂载元素（el属性）以及数据对象...
【前端框架学习】实验二 使用v-model实现简易计算器
Jerry‘s word
01-14 322
方法一： <body> <div id="app"> <input type="text" v-model='n1'> <select v-model='opt'> <option value="+">+</option> <option value="-">-</option> <optio
详解vue中v-on事件监听指令的基本用法
11-20
一、本节说明 我们在开发过程中经常需要监听用户的输入，比如：用户的点击事件、拖拽事件、键盘事件等等。这就需要用到我们下面要学习的内容v-on指令。 我们通过一个简单的计数器的例子，来讲解v-on指令的使用。 二、 怎么做 定义数据counter，用于表示计数器数字，初始值设置为0 v-on:click 表示当发生点击事件的时候，触发等号里面的表达式或者函数 表达式counter++和counter–分别实现计数器数值的加1和减1操作 语法糖：我们可以将v-on:click简写为@click 三、 效果 点击加号数值加1 点击减号数值减1 四、 深入 表达式只适用于简
用VB编写简单计算器
04-20
1．能够完成浮点数的加，减，乘，除；（平方等） 2．能够实现退格和清除功能； 3．初始值为0.0； 4．小数点不能重复输入； 5．高位数的0不出现； 6．应用控件数组实现。
v-model的练习简易计算器
w18103705129的博客
09-21 607
v-model是个双向数据绑定的指令，只能用在表单中，注意表单中的数字也是个字符串，所以要计算的话，必须转换为数字类型 其中v-model中绑定的是个变量，该变量必须在data中先声明，否则会报错，当点击=按钮的时候用一个方法来计算前两个数的运算。 其中这里用到一个函数eval(string)，它是用来计算字符串的，只能是原始的字符串，不能用一个属性或者对象再去定义它。     ...
Vue实践--v-model实现简易计算器
Lawless
04-22 573
最终效果： 暂时写这样，9键键盘输入数字正在编辑中..... 话不多说，直接上demo： 页面渲染： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...
05-v-model简易计算器
qq_42138430的博客
03-05 202
05- v-model简易计算器 在这里插入代码片 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&
vue---自学 v-model 简易计算器
qq_44643011的博客
01-27 274
v-model 双向绑定器 1.适用范围：input、select 输入，选择等框框可以使用本指令 2.使用效果：例：（1）在v-model绑定的input输入框内输入字符，可以同步改变 v-model data里面的数据 （2）在v-model绑定的select option 里面可以选择v-model data里面的数据 就像这里面的 m opt n ...
v-model实例——山顶洞人计算器
Scrow1204的博客
09-22 391
HTML代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="../lib/vue.js"&a
使用 v-model实现计算器案例
weixin_34393428的博客
02-25 149
<!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-com...
Vue的学习之路六：使用v-model制作简易计算器
神薯片
05-23 463
<body> <div id="app"> <input type="text" name="" id="" v-model="n1" /> <select name="" id="" v-model="opt"> <option value="+">+</option> <option value="-">-</option> ..
vue3实现简易计算器
04-18
Vue 3是一种流行的JavaScript框架，用于构建用户界面。下面是一个简单的示例，展示了如何使用Vue 3来实现一个简易计算器： 首先，你需要在HTML文件中引入Vue 3的库文件。可以通过CDN链接或者本地文件引入。 ```html <!DOCTYPE html> <html> <head> <title>Vue 3 Calculator</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <input v-model="num1" type="number"> <select v-model="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input v-model="num2" type="number"> <button @click="calculate">Calculate</button> <p>Result: {{ result }}</p> </div> <script> const app = Vue.createApp({ data() { return { num1: 0, num2: 0, operator: '+', result: 0 } }, methods: { calculate() { switch (this.operator) { case '+': this.result = this.num1 + this.num2; break; case '-': this.result = this.num1 - this.num2; break; case '*': this.result = this.num1 * this.num2; break; case '/': this.result = this.num1 / this.num2; break; } } } }); app.mount('#app'); </script> </body> </html> ``` 在上面的示例中，我们使用了Vue 3的`v-model`指令来实现双向数据绑定，将输入框中的值与Vue实例中的数据进行绑定。当点击"Calculate"按钮时，会调用`calculate`方法来执行相应的计算操作，并将结果显示在页面上。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值