Vue实现简单计算器


Posted in Vue.js onJanuary 20, 2021

本文实例为大家分享了Vue实现简单计算器的具体代码,供大家参考,具体内容如下

案例需求

Vue实现简单计算器

案例思路

1、通过v-model 指令 实现数值A和数值B的绑定
2、给计算按钮绑定事件,实现计算逻辑
3、将计算结果绑定到对应位置

实现静态页面

<div id='app'>
    <h1>简单计算器</h1>
    <div><span>数值A:</span><span><input type="text" v-model='a'></span></div>
    <div><span>数值B:</span><span type="text" v-model='b'></span></div>
    <div><button>计算</button></div>
    <div><span>计算结果</span><span></span></div>
</div>

导入Vue

<script type="text/javascript" src="js/vue.js"></script>

为静态页面添加指令

<div id='app'>
    <h1>简单计算器</h1>
    <div><span>数值A:</span>
      <span>
        <input type="text" v-model='a'>
      </span>
    </div>
    <div>
      <span>数值B:</span>
      <span>
        <input type="text" v-model='b'>
      </span>
    </div>
    <div>
      <button v-on:click="handle">计算</button>
    </div>
    <div><span>计算结果</span><span v-text="result"></span></div>
</div>

设置 计算功能

<script type="text/javascript">
    /* */
    var vm = new Vue({
      el: "#app",
      data: {
        a: '',
        b: '',
        result: ''
      },
      methods: {
        handle: function () {
          // 实现计算逻辑
          this.result = parseInt(this.a) + parseInt(this.b);
        }
      }
    });
</script>

最终代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单计算器</title>
</head>

<body>
  <div id='app'>
    <h1>简单计算器</h1>
    <div><span>数值A:</span>
      <span>
        <input type="text" v-model='a'>
      </span>
    </div>
    <div>
      <span>数值B:</span>
      <span>
        <input type="text" v-model='b'>
      </span>
    </div>
    <div>
      <button v-on:click="handle">计算</button>
    </div>
    <div><span>计算结果</span><span v-text="result"></span></div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /* */
    var vm = new Vue({
      el: "#app",
      data: {
        a: '',
        b: '',
        result: ''
      },
      methods: {
        handle: function () {
          // 实现计算逻辑
          this.result = parseInt(this.a) + parseInt(this.b);
        }
      }
    });
  </script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue 插槽简介及使用示例
Nov 19 Vue.js
浅析VUE防抖与节流
Nov 24 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
VUE递归树形实现多级列表
Jul 15 Vue.js
vue实现验证用户名是否可用
Jan 20 #Vue.js
vue实现按钮切换图片
Jan 20 #Vue.js
Vue实现图书管理案例
Jan 20 #Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 #Vue.js
vue二选一tab栏切换新做法实现
Jan 19 #Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 #Vue.js
vue element el-transfer增加拖拽功能
Jan 15 #Vue.js
You might like
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
php 使用array函数实现分页
2015/02/13 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
能说明你的Javascript技术很烂的五个原因分析
2011/10/28 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
python九九乘法表的实例
2017/09/26 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
Django视图类型总结
2021/02/17 Python
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
学前教育毕业生自荐信范文
2013/12/24 职场文书
销售辞职报告范文
2014/01/12 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
礼仪培训心得体会
2016/01/22 职场文书
银行工作心得体会范文
2016/01/23 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python