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 相关文章推荐
vue+iview实现分页及查询功能
Nov 17 Vue.js
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 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四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
Javascript 类型转换方法
2010/10/24 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
python利用装饰器进行运算的实例分析
2015/08/04 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
python实现Zabbix-API监控
2018/09/17 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
廉洁自律演讲稿
2014/05/22 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android