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 30 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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
php桌面中心(二) 数据库写入
2007/03/11 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
JavaScript的Cookies
2008/01/16 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python新手经常遇到的17个错误分析
2014/07/30 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
简单了解什么是神经网络
2017/12/23 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
学院书画协会部门职责
2013/11/28 职场文书
基层干部十八大感言
2014/01/19 职场文书
《影子》教学反思
2014/02/21 职场文书
yy司仪主持词
2014/03/22 职场文书
招标授权委托书样本
2014/09/23 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
高中班长竞选稿
2015/11/20 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript