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 相关文章推荐
js 代码集(学习js的朋友可以看下)
Jul 22 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
关于js遍历表格的实例
Jul 10 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
五种js判断是否为整数类型方式
Dec 03 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
原生js编写2048小游戏
Mar 17 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 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下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
Python字符串匹配算法KMP实例
2015/07/18 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
python如何定义带参数的装饰器
2018/03/20 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
详解Python的三种可变参数
2019/05/08 Python
python如何统计代码运行的时长
2019/07/24 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Python 日期与时间转换的方法
2020/08/01 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
企业治理工作自我评价
2013/09/26 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
Nginx如何配置根据路径转发详解
2022/07/23 Servers