第二章 Vue快速入门--14 使用v-model实现计算器的案例
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--1.导入Vue的包-->
<script src=" https://cdn.jsdelivr.net/npm/vue"></script> </head> <body>
<div id="app">
<input type="text" v-model="n1"> <select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select> <input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result"> </div> <script>
//创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el:'#app',
data:{
n1:0,
n2:0,
result:0,
opt:'+'
},
methods:{
calc(){//计算器算数的方法
//逻辑：
/* switch(this.opt){
case '+':
this.result=parseInt(this.n1)+parseInt(this.n2)
break;
case '-':
this.result=parseInt(this.n1)-parseInt(this.n2)
break;
case '*':
this.result=parseInt(this.n1)*parseInt(this.n2)
break;
case '/':
this.result=parseInt(this.n1)/parseInt(this.n2)
break;
}*/ //注意：这是投机取巧的方式，正式开发中，尽量少用
var codeStr='parseInt(this.n1)'+this.opt+'parseInt(this.n2)'
this.result=eval(codeStr)
}
}
}); </script>
</body>
</html>
第二章 Vue快速入门--14 使用v-model实现计算器的案例的更多相关文章
- 第二章 Vue快速入门--13 讲解v-model实现表单元素的数据双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 28 自定义按键修饰符
事件处理-按键修饰符 js 里面的键盘事件对应的键码 <!DOCTYPE html> <html lang="en"> <head> <m ...
- 第二章 Vue快速入门-- 27 字符串的padStart方法使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 26 过滤器-定义私有过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 25 过滤器-定义格式化时间的全局过滤器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门-- 23 品牌案例-根据关键字实现数组的过滤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--20 品牌案例-完成品牌列表的添加功能+ 21 品牌案例-根据Id完成品牌的删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--12 事件修饰符的介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 第二章 Vue快速入门--10-11 跑马灯效果制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
随机推荐
- SpringCloud学习（四）断路器（Hystrix）(Finchley版本)
在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调用(RPC),在Spring Cloud可以用RestTemplate+Ribbon和Feign来调用.为了保证其高可用,单个服务 ...
- JSP基础知识补充
<meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cac ...
- poj2152 Fire（树形DP）
题目链接:https://vjudge.net/problem/POJ-2152 题意:给定一颗大小为n的树,在每个结点建消防站花费为w[i],如果某结点没有消防站,只要在它距离<=d[i]的结 ...
- [loj#2005][SDOI2017]相关分析 _线段树
「SDOI2017」相关分析 题目链接:https://loj.ac/problem/2005 题解: 把上面的式子拆掉,把下面的式子拆掉. 发现所有的东西都能用线段树暴力维护. 代码: #inclu ...
- Kafka主题体系架构-复制、故障转移和并行处理
本文讨论了Kafka主题的体系架构,讨论了如何将分区用于故障转移和并行处理. Kafka主题,日志和分区 Kafka将主题存储在日志中.主题日志分为多个分区.Kafka将日志的分区分布在多个服务器或磁 ...
- 【hash】珍珠
[来源] https://loj.ac/problem/2427 [参考博客] LOJ#2427. 「POI2010」珍珠项链 Beads [题解]: 复杂度计算: 暴力枚举k每次计算是n/2+n/3 ...
- （转）关于Android中为什么主线程不会因为Looper.loop()里的死循环卡死？引发的思考，事实可能不是一个 epoll 那么 简单。
( 转载请务必标明出处:http://www.cnblogs.com/linguanh/, 本文出自:[林冠宏(指尖下的幽灵)的博客]) 前序 本文将会把一下三个问题阐述清楚以及一个网上的普遍观点的补 ...
- [IOI2005]Riv河流
题目链接:洛谷,BZOJ 前置知识:莫得 题解 直接考虑dp.首先想法是设状态 \(dp[u][i]\) 表示u的子树内建 \(i\) 个伐木场且子树内木头都运到某个伐木场的最小花费.发现这样的状态是 ...
- Unity Button按钮延迟
1.把下面脚本放到Editor文件夹下,这样脚本继承Button之后,新声明的public变量才能在Inspector面板显示出来. using System.Collections; using S ...
- 15条SQLite3语句
15条SQLite3语句 转自:http://www.thegeekstuff.com/2012/09/sqlite-command-examples/ SQLite3 is very light ...