第二章 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 ...
随机推荐
- hdoj2196（树形dp，树的直径）
题目链接:https://vjudge.net/problem/HDU-2196 题意:给出一棵树,求每个结点可以到达的最远距离. 思路: 如果求得是树上最长距离,两次bfs就行.但这里求的是所有点的 ...
- 【转帖】我以为我对Kafka很了解，直到我看了这篇文章
我以为我对Kafka很了解,直到我看了这篇文章 2019-08-12 18:05 https://www.sohu.com/a/333235171_463994?spm=smpc.author.fd- ...
- *【Python】【demo实验30】【练习实例】【使用Turtle实现实时时钟效果】
目的: 使用Turtle实现实时时钟效果 源代码: # encoding=utf-8 # -*- coding: UTF-8 -*- import turtle from datetime impor ...
- oracle——学习之路（SQL基础）
使用create语句创建表 create table 表名 ( 列名 类型 [null | not null], 列名 类型 [null | not null] ) 在 ...
- MySQL如何利用索引优化ORDER BY排序语
MySQL索引通常是被用于提高WHERE条件的数据行匹配或者执行联结操作时匹配其它表的数据行的搜索速度. MySQL也能利用索引来快速地执行ORDER BY和GROUP BY语句的排序和分组操作. 通 ...
- Java中的自动拆装箱（转）
出处: 一文读懂什么是Java中的自动拆装箱 本文主要介绍Java中的自动拆箱与自动装箱的有关知识. 基本数据类型 基本类型,或者叫做内置类型,是Java中不同于类(Class)的特殊类型.它们是我 ...
- Java EE javax.servlet中的ServletResponse接口
ServletResponse接口 public interface ServletResponse 子接口:HttpServletResponse 实现类:HttpServletResponseWr ...
- 3.Shell的基本功能
3.Shell的基本功能Bash是Bourne-Again Shell的缩写.Bourne Shell的内部命令在Bash中同样适用.3.1 Shell语法3.1.1 Shell操作shell读取和执 ...
- Bootstrap3基础教程 02 网格布局
Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多列. 网页设计中的网格布局作用:组织内容,让网站易于浏览,并降低用户端 ...
- QT编译Mysql驱动问题及解决方案
默认情况下,qt 并没有自带mysql的数据库插件,需要自己编译先安装mysql server ,运行setup.exe时选择自定义安装,安装目录设为"D:\mysqldev"不要 ...