vue实现简易计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="num2">
<input type="button" value="=" @click="cal">
<input type="text" v-model="result">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
num1:0,
num2:0,
result:0,
opt:"+"
},
methods:{
cal(){
switch (this.opt) {
case "+":
this.result = parseInt(this.num1) + parseInt(this.num2)
break;
case "-":
this.result = parseInt(this.num1) - parseInt(this.num2)
break;
case "*":
this.result = parseInt(this.num1) * parseInt(this.num2)
break;
case "/":
this.result = parseInt(this.num1) / parseInt(this.num2)
break;
}
}
}
})
</script>
</body>
</html>
vue实现简易计算器的更多相关文章
- Vue 制作简易计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 黑马vue---15、使用v-model实现简易计算器
黑马vue---15.使用v-model实现简易计算器 一.总结 一句话总结: 用v-model绑定了第一个数,第二个数,操作符,和结果,数据改变他们跟着变,他们变数据也跟着变 select v-mo ...
- 自制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 ...
- 菜鸟学习Struts——简易计算器
这是学习Struts的一个简单的例子文件结构如下: 1.配置Struts环境 2.新建input.jsp,success.jsp,error.jsp input.jsp代码如下: <%@ pag ...
- Python之实现一个简易计算器
自己动手写计算器 一.功能分析 用户输入一个类似这样 3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 这样的表达式,假设表达式里 ...
- 使用HTML+CSS，jQuery编写的简易计算器
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
随机推荐
- 10 (OC)* Coretext
CoreText实现 看上图,我们可以知道,一个View包括CTFrame,CTFrame中间包括许多行CTLine,而一个CTLine中包括许多CTRun 我们主要说说CTLine和CTRun ...
- Docker详解（三）
目录 1. Docker镜像 1.1 镜像存储 1.2 base镜像 1.3 镜像Commit 2. Docker容器数据卷 2.1 基本介绍 2.2 数据卷 2.3 数据卷容器 序言:前两章我们主要 ...
- centos7 supervisor管理redis
centos7 supervisor管理redis 标签(空格分隔): linux,redis 概念 Supervisor 相当强大,提供了很丰富的功能,不过我们可能只需要用到其中一小部分 super ...
- Micrometer 快速入门
Micrometer为最流行的监控系统提供了一个简单的仪表客户端外观,允许仪表化JVM应用,而无需关心是哪个供应商提供的指标.它的作用和SLF4J类似,只不过它关注的不是Logging(日志),而是a ...
- python打开文件查询字符串时报UnicodeDecodeError: 'gbk' codec can't decode byte 0xaa in position 19: illegal multibyte sequence错误
当这样打开时报错了 lines = open(path).readlines() open(path).close() for line in lines: idx1 = line.find('检测到 ...
- 安装pytest-allure-adaptor后，运行报错：AttributeError: module 'pytest' has no attribute 'allure'
原因:因为pytest-allure-adaptor库基本被python3放弃了,运行很不友好,反正我运行就是报错 解决方法: 先卸载:pip uninstall pytest-allure-ad ...
- 读《深入理解Elasticsearch》点滴-查询评分
计算文档得分的因子: 文档权重(document boost):索引期赋予某个文档的权重值 字段权重(field boost):查询期赋予某个文档的权重值 协调因子(coord):基于文档中词项个数的 ...
- Mycat 配置文件schema.xml
1.介绍 schema.xml 作为 MyCat 中重要的配置文件之一,管理着 MyCat 的逻辑库.表.分片规则. DataNode 以及 DataSource. 2.schema相关标签 sche ...
- <反向传播(backprop)>梯度下降法gradient descent的发展历史与各版本
梯度下降法作为一种反向传播算法最早在上世纪由geoffrey hinton等人提出并被广泛接受.最早GD由很多研究团队各自发表,可他们大多无人问津,而hinton做的研究完整表述了GD方法,同时hin ...
- One layer SoftMax Classifier, "Handwriting recognition"
import lib needed¶ In [1]: from PIL import Image import numpy as np import matplotlib.pyplot as ...