黑马vue---15、使用v-model实现简易计算器
黑马vue---15、使用v-model实现简易计算器
一、总结
一句话总结：
用v-model绑定了第一个数，第二个数，操作符，和结果，数据改变他们跟着变，他们变数据也跟着变
select v-model="opt"
1、eval取巧方式？
this.result = eval('parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)')
二、内容在总结中
<!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>
<script src="./lib/vue-2.4.0.js"></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---15、使用v-model实现简易计算器的更多相关文章
- Vue 制作简易计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- vue实现简易计算器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Python之实现一个简易计算器
自己动手写计算器 一.功能分析 用户输入一个类似这样 3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 这样的表达式,假设表达式里 ...
- PyQt5 简易计算器
剩下计算函数(self.calculator)未实现,有兴趣的朋友可以实现它 [知识点] 1.利用循环添加按钮部件,及给每个按钮设置信号/槽 2.给按钮设置固定大小:button.setFixedSi ...
- 制作一个简易计算器——基于Android Studio实现
一个计算器Android程序的源码部分分为主干和细节两部分. 一.主干 1. 主干的构成 计算器的布局 事件(即计算器上的按钮.文本框)监听 实现计算 2. 详细解释 假设我们的项目名为Calcula ...
- 自制c#简易计算器
这是一个课堂作业,我觉得作为一个简易的计算器不需要态度复杂的东西,可能还有一些bug,有空再慢慢加强. using System;using System.Collections.Generic;us ...
- 剖析简易计算器带你入门微信小程序开发
写在前面,但是重点在后面 这是教程,也不是教程. 可以先看Demo的操作动图,看看是个什么玩意儿,GitHub地址(https://github.com/dunizb/wxapp-sCalc) 自从微 ...
- PHP学习笔记02——简易计算器
<!DOCTYPE html> <html> <head> <title>PHP简易计算器</title> </head> &l ...
- JavaScript之简易计算器
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
随机推荐
- css 之calc无效踩坑
踩坑: 1. height:calc(100vh-60); 无效 2.height:calc(100vh-60px); 无效 3.height:calc(100vh - 60px); 终于起效 总 ...
- shiro系列二、身份验证和授权
一.身份验证 先来看看身份验证的流程 流程如下: 1.首先调用Subject.login(token)进行登录,其会自动委托给Security Manager,调用之前必须通过SecurityUtil ...
- 《浏览器工作原理与实践》<04>从输入URL到页面展示，这中间发生了什么？
“在浏览器里,从输入 URL 到页面展示,这中间发生了什么? ”这是一道经典的面试题,能比较全面地考察应聘者知识的掌握程度,其中涉及到了网络.操作系统.Web 等一系列的知识. 在面试应聘者时也必问这 ...
- Dockerfile命令详解
使用docker就会避免不了的要做各种镜像,就会用到dockerfile,记录一下dockerfile的主要命令 1.主要组成部分 dockerfile执行build命令时,是从上倒下依次执行 ...
- 关于rtos中任务切换时的程序流程
今天和一个小伙伴讨论了一下基于cortex-m3内核的RTOS在任务切换时的程序流程,小伙伴说国内某搜索引擎都搜不到这类的信息,所以我才打算写下来,硬件平台是stm32f1. 这里的切换有两种情况: ...
- 编译原理实战——使用Lex/Flex进行编写一个有一定词汇量的词法分析器
编译原理实战--使用Lex/Flex进行编写一个有一定词汇量的词法分析器 by steve yu 2019.9.30 参考文档:1.https://blog.csdn.net/mist14/artic ...
- final 在 java 中有什么作用？（未完成）
final 在 java 中有什么作用?(未完成)
- CSP2019 退役记
本来想写"退役在即"的,考完 Day2 后直接改成"退役记"了 Day 0 在 ssf 的机房里继续变弱,自己写了一遍 splay 板子,居然写对了,开心 非常 ...
- vsftpd的安装和配置
1 安装vsftpd sudo apt-get install vsftpd 2 测试是否安装成功 sudo service vsftpd restart 如果有反应即成功 3 彻底卸载vsft ...
- springboot请求体中的流只能读取一次的问题
场景交代 在springboot中添加拦截器进行权限拦截时,需要获取请求参数进行验证.当参数在url后面时(queryString)获取参数进行验证之后程序正常运行.但是,当请求参数在请求体中的时候, ...