vue实现简单加法计算器


Posted in Javascript onOctober 22, 2020

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

只需要简单两步

1.模板结构,设计界面
2.处理数据和控制逻辑

vue实现简单加法计算器

代码:

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <div id="app">
 <div>
  <h1>简单计算器</h1>
  <div>
  <span>数值A:</span>
  <span>
   <input type="text" v-model='a'>//通过v-model指令实现数值a的绑定
  </span>
  </div>
  <div>
  <span>数值B:</span>
  <span>
   <input type="text" v-model='b'>//通过v-model指令实现数值b的绑定
  </span>
  </div>
  <div>
  <button @click='handle'>计算</button>
  </div>
  <div>
  <span>计算结果:</span>
  <span v-text='result'></span>
  </div>
 </div>
 </div>
 <script type="text/javascript" src="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>

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

Javascript 相关文章推荐
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
javascript制作loading动画效果 loading效果
Jan 14 Javascript
javaScript语法总结
Nov 25 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 Javascript
字节飞书面试promise.all实现示例
Jun 16 Javascript
微信小程序实现选项卡滑动切换
Oct 22 #Javascript
微信小程序实现文件预览
Oct 22 #Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 #Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 #Javascript
vue实现下拉菜单树
Oct 22 #Javascript
Javascript柯里化实现原理及作用解析
Oct 22 #Javascript
Node.js fs模块原理及常见用途
Oct 22 #Javascript
You might like
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
jquery 防止表单重复提交代码
2010/01/21 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
Python实现的生成自我描述脚本分享(很有意思的程序)
2014/07/18 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
材料成型及控制工程专业求职信
2014/06/19 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
单位接收函范文
2015/01/30 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
十八大观后感
2015/06/12 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
公司员工培训管理制度
2015/08/04 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
Python类方法总结讲解
2021/07/26 Python