第二章 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 ...
随机推荐
- 现代化的拷贝文字---clipboard.js
参考链接:http://www.clipboardjs.cn/
- nginx 代理 registry docker certificate is valid for k8s, not
1.配置SSL证书及nginx反向代理docker registry 搭建私有CA,初始化CA环境,在/etc/pki/CA/下建立证书索引数据库文件index.txt和序列号文件serial,并为证 ...
- [bzoj3357][Usaco2004]等差数列_动态规划_贪心
[Usaco2004]等差数列 题目大意:约翰发现奶牛经常排成等差数列的号码．他看到五头牛排成这样的序号:“1,4,3,5,7”很容易看出“1,3,5,7”是等差数列.给出N(1≤N≤2000)数字A ...
- Linux安装redis logstash
一.安装redis tar -zxvf redis-3.2.8.tar.gz cd redis-3.2.8 make && make install PREFIX=/usr/loca ...
- Redis（1.12）Redis cluster搭建常见错误
[1]gem install redis 报错 redis-cluster安装需要通过gem install redis来安装相关依赖.否则报错.通过gem install redis执行后会出现两个 ...
- 【转帖】Office的光荣历史(1)
Office的光荣历史(1) https://www.sohu.com/a/201410882_657550 微软的第一版本的office 竟然是 给Mac OS 提供的.. 2017-10-31 1 ...
- java分词工具hanlp介绍
前几天(6月28日),在第23届中国国际软件博览会上,hanlp这款自然语言处理工具荣获了“2019年第二十三届中国国际软件博览会优秀产品”. HanLP是由一系列模型预算法组成的工具包,结合深度神经 ...
- 我的第一个Java博客
1.2019 11.23 Alone in Beijing;
- linux系统设置允许密码登录
编辑 /etc/ssh/sshd_config 文件 将PasswordAuthentication 的值改为 yes 然后重启ssh 服务 进入到 /etc/init.d 文件夹内 执行 ./s ...
- centos配置LVS
LVS有三种工作模式:NAT, TUN, DR. DR是三种工作模式中性能最高的,TUN次之. 本文记录LVS/TUN和LVS/DR工作模式的配置过程. 环境: 三台CentOS 7 x64 虚拟机 ...