第二章 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 ...
随机推荐
- 【FFMPEG】使用FFMPEG+H264实现RTP传输数据
开发环境:WINDOWS7 32bitMINGWeclipse juno cdt1.首先你要编译好FFMPEG,a) 方法一:可以去官网下载源码,用MINGW编译(编译时记得支持H264,当然,事先得 ...
- Android MVC MVP MVVM (二)
MVP模型 View主要是Activity,Fragment MVP和MVC的差别 1.Model和View不再直接通信,通过中间层Presenter来实现. 2.Activity的功能被简化,不再充 ...
- 阿里redis
参考: 连接: https://help.aliyun.com/document_detail/43848.html?spm=a2c4g.11186623.2.29.295542efrNOQy0 同R ...
- 21.根据hive绑定数据统计计算保存到hive表中
创建upflow表 create external table mydb2.upflow (ip string,sum string) row format delimited fields term ...
- [官网] 一个很好的 search rpm 或者是deb 包的网站
https://pkgs.org Home About About pkgs.org - Packages Search The pkgs.org is created to provide you ...
- cxLookupComboBox控件的应用
1.Properties-DropDownListStyle:下拉列表的模式, 里面有三个值:lsEditList: lsEditFixedList lsFixedList 2.Head ...
- LEN()和DATALENGTH()的区别
原文:LEN()和DATALENGTH()的区别 版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.n ...
- php+lottery.js制作九宫格抽奖实例
php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...
- 同一台服务器请求easyswoole的一个websocket接口报错
求助大神啊!file_get_contents报这个错:failed to open stream: Connection timed out换成curl又报这个错:couldn't connect ...
- dmesg、stat命令
一.dmesg:系统启动异场诊断. 语法: dmesg [选项] 参数: -C,-清除 清除环形缓冲区. -c,--read-clear ...