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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
javascript Excel操作知识点
Apr 24 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
js下用eval生成JSON对象
Sep 17 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
php获取目标函数执行时间示例
2014/03/04 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
访问编码后的中文URL返回404错误的解决方法
2014/08/20 PHP
隐性调用php程序的方法
2015/06/13 PHP
JavaScript 事件系统
2010/07/22 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
python获取标准北京时间的方法
2015/03/24 Python
Python实现的双色球生成功能示例
2017/12/18 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
python3爬虫中多线程的优势总结
2020/11/24 Python
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
运动会稿件200字
2014/02/07 职场文书
物业总经理岗位职责
2014/02/28 职场文书
网络编辑岗位职责
2014/03/18 职场文书
团日活动总结
2014/04/28 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
三年级学生期末评语
2014/12/26 职场文书
母亲节寄语大全
2015/02/27 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技