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 相关文章推荐
用JavaScript隐藏控件的方法
Sep 21 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
深入解析ES6中的promise
Nov 08 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
微信小程序实现选项卡滑动切换
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之第十天
2006/10/09 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
JS 控制非法字符的输入代码
2009/12/04 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
js实现漫天星星效果
2017/01/19 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python httplib,smtplib使用方法
2008/09/06 Python
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
分享Python文本生成二维码实例
2016/01/06 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
python中正则的使用指南
2016/12/04 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
倡议书范文格式
2014/05/12 职场文书
篮球社团活动总结
2014/06/27 职场文书
大队委员竞选稿
2015/11/20 职场文书
新学期家长寄语2016
2015/12/03 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
MySQL 开窗函数
2022/02/15 MySQL
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers