Vue的学习之路六：使用v-model制作简易计算器

最新推荐文章于 2022-05-03 09:13:50 发布
最新推荐文章于 2022-05-03 09:13:50 发布
阅读量475 收藏 2
点赞数
分类专栏： # Vue 文章标签： vue html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39020133/article/details/106295614
版权 
  <body>
    <div id="app">
      <input type="text" name="" id="" v-model="n1" />
      <select name="" id="" v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
      <input type="text" name="" id="" v-model="n2" />
      <input type="button" value="=" @click="calc"/>
      <input type="text" value="=" v-model="result" />
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          n1: 0,
          n2: 0,
          result: 0,
          opt: '+',
        },
        methods: {
          calc() {
            // 这是投机取巧的方式，正式开发中尽量少用
            var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
            this.result = eval(codeStr)
            //计算器算数的方法
            // 逻辑
          //   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>

使用v-model制作一个简易的计算器

  1. v-model数据双向绑定，V能改变M，M也可以改变V
  2. @是v-on的缩写，绑定事件机制，会在Vue实例的methods属性中查找方法
亥虫
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue实践--v-model实现简易计算器
Lawless
04-22 584
最终效果： 暂时写这样，9键键盘输入数字正在编辑中..... 话不多说，直接上demo： 页面渲染： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...
Vue · v-model实现简易计算器
chez-moi
03-12 922
通过用v-model来实现简易计算器 【代码实现】 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue学习</title> <script src="https://cdn.jsdelivr.net/npm/vue/dis...
v-model双向绑定制作简易计算器
最爱喝怡宝的博客
11-10 776
通过双向绑定可以做出一个简易的计算器，代码如下： 样式部分： <div id="app"> <input type="text" v-model="num1"> <select name="" id="" v-model="option"> <option value="+">+</option> <option value="-">-</o
使用v-model实现简易计算机
Socraton的博客
12-24 198
<div id="app"> <input type="text" v-model="n1"> <select v-model="opt"> <option value="+">+</option> <option value="-">-<...
Vue的v-model实现简单的计算器
weixin_44684357的博客
06-28 531
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- v
v-model制作简易计算器
Wrj6811的博客
11-04 439
<!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-model实现简易计算器
10-14
在本文中，我们将深入探讨如何使用Vue.js的`v-model`特性来实现一个简单的计算器。Vue.js是一个流行的前端JavaScript框架，它提供了数据绑定和组件化的能力，使得开发用户界面更加容易。`v-model`是Vue中用于双向...
v-model实现一个简易版的计算器,vue
qq_41117240的博客
10-17 447
首先要导入vue的包，利用v-model的数据双向绑定实现 简易版计算器
【前端框架学习】实验二 使用v-model实现简易计算器
Jerry‘s word
01-14 344
方法一： <body> <div id="app"> <input type="text" v-model='n1'> <select v-model='opt'> <option value="+">+</option> <option value="-">-</option> <optio
用v-modle做一个简单的计算器
qq_42309685的博客
08-13 194
效果如下： 代码如下（代码里没有引入vue库，注意）： <div id="app"> <input type="text" v-model = "n1"> <select v-model = "opt"> <option value="+">+</option> <option value="-">-&l...
使用Vue实现简单计算器
12-28
使用Vue编写简单计算器，供大家参考，具体内容如下 在Vue中，v-model 指令，可以实现表单元素和 Model 中数据的双向数据绑定，接下来，我们就用这个指令编写一个简单的计算器，代码如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> [removed][removed] </head> <body> <!--计算器的显示结构-->
v-model的小案例-简易计算器
stphencurry的博客
03-21 130
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <input type="text" v-model="n1"> <select v-model="opt"> <option v
使用v-model和eval函数实现我的计算器
weixin_43803985的博客
07-29 516
在实现我的计算器小程序中，需要注意以下几个细节 v-model：使用的格式为 v-model=" "。使用等于号 在下拉列表中option要写上 value=" " 在script中的methods方法中，使用data中的数据，要使用this关键字，否则不能识别 eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。虽然可以简化代码，但不支持多次使用 实例，使用sw...
使用vue制作计算器
任亚兵
05-03 566
首先要在vue官网下载vue.js文件，之后对下载的vue文件导入项目中。
用vue制作简易计算器
小颜颜6035的博客
08-13 1587
用vue制作简易计算器： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计算器</title> <script src="https://cd
使用 v-model实现计算器案例
weixin_34393428的博客
02-25 159
<!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学习（八）——案例：简单计算器
云中、漫步的博客
10-02 443
要求：使用Vue语法，实现一个简单的加法计算器，实现步骤如下： 通过v-model 实现 数值a 和 数值b 的双向绑定 给按钮绑定事件 让 输入框中的值 相加 将拿到的结果渲染到页面上 <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body>
v-model实现简单计算器
weixin_45616246的博客
04-05 448
请陛下批阅 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&...
vue.js从入门到深入再到随心而用———利用v-model制作简易计算机
Belief的博客
03-18 224
v-model的学习1.效果2.代码3. 要点 1.效果 在两个输入框中分别输入数字，再选择做什么运算，最后按=号得到结果 2.代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="t...
Vue.js MVVM实现：v-model与{{}}指令解析
"这篇教程主要关注Vue.js框架中两个核心指令——`v-model`和`{{}}`（也称为插值表达式）的实现方法。文章通过构建一个简易的MVVM（Model-View-ViewModel）类，展示了如何将数据绑定到视图并实时更新。作者在上一章节...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值