<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript" src="vue.min.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="abc1"/>

			<input type="text" v-model="result"/>

		</div>

	</body>

	<script>

		new Vue({

			el:"#app",

			data:{

				n1:0,

				opt:'+',

				n2:0,

				result:0

			},

			methods:{

				abc(){

					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;

					}

				},

				abc1(){

					var stringopt = "parseInt(this.n1)" + this.opt + "parseInt(this.n2) ";

					this.result = eval(stringopt);

				}

			}

		});

	</script>

</html>

　　

vuejs基础-计算器案例的更多相关文章

  1. Coursera 机器学习课程 机器学习基础：案例研究 证书

    完成了课程1  机器学习基础:案例研究 贴个证书,继续努力完成后续的课程:

  2. PHP的基础计算器

    设计一个计算的功能,该功能能够完成运算并且能够对不合理的数据进行验证并且给出错误提示. 规则: 第一个数,第二个数不能够为空 如果操作符是/,第二个数数不能够为0. <?php header(' ...

  3. js计算器案例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  4. 项目：JS实现简易计算器案例

    组件化网页开发下的: 步骤一:让页面动起来的JavaScript深入讲解  的 项目:JS实现简易计算器案例

  5. Vuejs 基础与语法

    Vue 实例 创建第一个实例 {{}} 被称之为插值表达式.可以用来进行文本插值. <!DOCTYPE html> <html lang="en"> < ...

  6. Java对象简单实用（计算器案例）

    对 Java中的对象与属性,方法的使用,简单写了个案例 import java.util.Scanner; class Calculste { int a; //定义两个整数 int b; Strin ...

  7. VueJS基础框架代码介绍

    参考文档 https://vuejs.bootcss.com/v2/api/ https://router.vuejs.org/zh-cn/essentials/getting-started.htm ...

  8. Java基础经典案例

    案例列表 01减肥计划switch版本 02减肥计划if版本 03逢七跳过 04不死神兔 05百钱白鸡 06数组元素求和 07判断两个数组是否相同 08查找元素在数组中的索引 09数组元素反转 10评 ...

  9. jsp开发模式和web计算器案例

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

随机推荐

  1. vue-cli-webpake搭建和配置

    确认创建项目后,后续还需输入一下项目名称.项目描述.作者.打包方式.是否使用ESLint规范代码等等,详见上图.安装顺利执行后会,生成如下文件目录:1.全局化安装cnpm npm install cn ...

  2. 确定Git与GitHub连接起来

    1.准备工作 1)下载Git 2)注册GitHub 3)将Git与GitHub链接起来 1.获取ssh密匙 2.GitHub里 找到settings 填入密匙 2.正式开始 1)确定Git与GitHu ...

  3. Solr的学习使用之（十）数据库（Oracle、SqlServer）原有的全文索引功能和Solr对比？

    本人有个问题一直不解,既然solr的全文索引功能这么强大,而且效果也不错,那为什么那些数据库厂商比如Oracle.SqlServer,不把solr的功能集成进去呢,或者说把全文索引的功能做好点,做到和 ...

  4. springMvc几个常用注解

    浏览器本省就是get ,post 可以用form表单 @RequestMapping: 作用:用来映射请求的url @RequestMapping注解的多个属性是与(且)的关系,必须同时满足 位置:可 ...

  5. 2019-4-21-Roslyn-通过-NuGet-库修改应用程序入口函数

    title author date CreateTime categories Roslyn 通过 NuGet 库修改应用程序入口函数 lindexi 2019-4-21 17:37:1 +0800 ...

  6. Raven2

     Raven2实验 0x01 寻找IP 本机IP:56.130 1. 使用 nmap -sn "ip6"#主机发现(不进行端口扫描) https://cloud.tencent.c ...

  7. Puppeteer实现自动登录

    Puppeteer是用JS对Chrome Dev Tools的实现,可以用来操作Chrome浏览器,适用于爬虫.自动化等领域. 以下是自己实现自动化登录的代码(基于ES6) const puppete ...

  8. 07-求解Ax=0：主变量、特解

    一.定义转向算法 在第六节讲了空间,列空间,零空间的定义,这节主要讲解如何求出这些空间,即求解$Ax=0$的过程是怎么样的过程,以下面的矩阵$A$为例:(这里主要是长方阵) $A=\left[\beg ...

  9. PTA 错题记录

    程设期中考, 记录一下曾经做错的选择填空. 1. 2. 3. 4. 5. 6.

  10. 树形dp专栏

    前言 自己树形dp太菜了,要重点搞 219D Choosing Capital for Treeland 终于自己做了一道不算那么毒瘤的换根dp 令 \(f[u]\) 表示以 \(u\) 为根,子树内 ...