第二章 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 ...
随机推荐
- web代码审计题
@题名:code i春秋https://www.ichunqiu.com/battalion wp:https://www.ichunqiu.com/writeup/detail/4139
- jQuery代码书写规范
1. 对于同一个对象不超过三个操作的,可以直接写成一行 $("li").show().unbind("click"); 2. 对于同一个对象的较多操作,建议每行 ...
- Linux三剑客之grep常用参数详细总结
三剑客grep总结 grep : Linux三剑客老三 过滤需要的内容 参数: grep一般常用参数: -a :在二进制文件中,以文本文件的方式搜索数据 -c :计算找到 ’ 搜索字符串 ...
- 第五周课程总结&试验报告（三）
第五周课程总结&试验报告(三) 实验三 String类的应用 实验目的 掌握类String类的使用: 学会使用JDK帮助文档: 实验内容 ###1.已知字符串:"this is a ...
- Design Snake Game
Design a Snake game that is played on a device with screen size = width x height. Play the game onli ...
- 数据检索grep
linux操作中,总是会输出很多的内容.但是有些内容并不是我们重点关注的,所以为了看起来方便,也为了提升效率,就将不需要的内容过滤掉. 只输出想要的东西. grep: 用于搜索 模式参数(给定的字符 ...
- Spring4学习回顾之路04—引用其他Bean，集合数据注入，内部Bean
引用其他Bean 组件应用程序的Bean经常需要相互协作以完成应用程序的功能,所以要求Bean能够相互访问,就必须在Bean配置文件中指定Bean的引用.在Bean的配置文件中可以用过<ref& ...
- 树莓派3b 串口乱码的一个解决思路
首先确认波特率设置正确,为115200 向microSD卡中烧录树莓派官方的镜像后,先不要急着把它插入树莓派中. 在电脑上打开microSD卡,按如下方式修改config.txt和cmdline.tx ...
- python函数篇0-2
函数的有三中不同的参数: 普通参数 默认参数 动态参数# ######### 定义函数 ######### # name 叫做函数func的形式参数,简称:形参def func(name): p ...
- Mysterious Crime CodeForces - 1043D (哈希)
大意: 给定m个n排列, 求有多少个公共子串. 枚举每个位置, hash求出最大匹配长度. #include <iostream> #include <sstream> #in ...