<!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. java反射, 不看你可别后悔

    开发中, 难免遇到些私有的属性和方法, 就好比下面的实体一样, 我们该怎么获得她, 并玩弄于手掌呢? 我们先来个实体瞧瞧, 给你个对象你也new不了, hahaha- 单身wang public cl ...

  2. 采用pacemaker+corosync实现postgresql双机热备、高可用方案

    环境说明 参照上章已完成postgresql流复制配置,并关闭postgres服务. su - postgres pg_ctl -D /data/postgresql/data/ stop -m fa ...

  3. Linux安装postgresql及基础操作

    安装环境说明 系统环境说明 [root@slave1 ~]# cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) [root@sl ...

  4. 即时通讯(II)

    Socket 连接Demo Socket客户端代码 #import "ViewController.h" //0.导入头文件 #include <netinet/in.h&g ...

  5. 认知redis

    一.redis是什么? 1.基于key-value的内存No sql 数据库(非关系型数据库) 2.读写性能非常好 二.redisd的数据类型有哪些?特点分别是什么? 1)string 一个键对一个值 ...

  6. 网络拓扑_VLAN与Trunk配置

    实验目的: 1.实现VLAN10的两台主机互通; VLAN20的两台主机互通; 2.VLAN10与VLAN20主机不能互通. 拓扑图: 步骤: 1.依图配置PC1,PC2,PC3,PC4的IP,掩码, ...

  7. SSM架构 （Spring 5.0.2）添加Jackson

    第一步添加jsckson的包 <dependency> <groupId>javax.annotation</groupId> <artifactId> ...

  8. Linux下NFS服务器的搭建与配置（转）

    一.NFS服务简介 NFS 就是 Network FileSystem 的缩写,最早之前是由sun 这家公司所发展出来的. 它最大的功能就是可以透过网络,让不同的机器.不同的操作系统.可以彼此分享个别 ...

  9. idea hibernate console 执行hql报错

    报错信息 hql> select a from GDXMZD a[2019-08-29 13:45:01] org.hibernate.service.spi.ServiceException: ...

  10. bzoj4399 魔法少女LJJ 线段树合并+线段树二分+并查集

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4399 题解 毒瘤题 \(9\) 种操作还有支持动态图的连通性 仔细读题 $ c<=7$. ...