Vue实现简单计算器案例


Posted in Javascript onFebruary 25, 2020

利用Vue.js写的一个简单的计算器。非常简单的案例。

通过这个案例,练习一下Vue的语法。

通过案例可以看出,Vue.js解放了DOM操作。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue计算器</title>
</head>
<body>
<div id="app">
 <input type="number" v-model="num1">
 <select v-model="operation">
  <option value="0">+</option>
  <option value="1">-</option>
  <option value="2">*</option>
  <option value="3">/</option>
 </select>
 <input type="number" v-model="num2">
 <button @click="calculate">=</button>
 <strong>{{results}}</strong>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
 new Vue({
  el: '#app',
  data:{
   operation: '0',
   results: '0',
   num1:0,
   num2:0,
  },
  methods:{
   calculate:function(){
    switch (this.operation) {
     case '0' :
      this.results = parseInt(this.num1) + parseInt(this.num2);
      break;
     case '1' :
      this.results = this.num1-this.num2;
      break;
     case '2' :
      this.results = this.num1*this.num2;
      break;
     case '3' :
      this.results = this.num1/this.num2;
      break;
    }
   }
  }
 })
 
</script>
 
</body>
</html>

截图:

Vue实现简单计算器案例

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

Javascript 相关文章推荐
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
使用Vue实现简单计算器
Feb 25 #Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 #Javascript
Vue实现简易计算器
Feb 25 #Javascript
js+canvas实现简单扫雷小游戏
Jan 22 #Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 #Javascript
es6中let和const的使用方法详解
Feb 24 #Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 #jQuery
You might like
php解析url的三个示例
2014/01/20 PHP
php实例分享之二维数组排序
2014/05/15 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
在Python中使用列表生成式的教程
2015/04/27 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
Python模块 _winreg操作注册表
2020/02/05 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
python实现代码审查自动回复消息
2021/02/01 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
优秀乡村医生事迹材料
2014/05/28 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
自荐信格式范文
2015/03/04 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL