<!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. 2019 Multi-University Training Contest 1 - 1001 - Blank - dp

    http://acm.hdu.edu.cn/showproblem.php?pid=6578 不会做,看题解. 设dp[i][j][k][l]表示4种颜色出现的最后的位置分别是i,j,k,l的方法数, ...

  2. BZOJ1135 LYZ（POI2009） Hall定理+线段树

    做这个题之前首先要了解判定二分图有没有完备匹配的Hall定理: 那么根据Hell定理,如果任何一个X子集都能连大于等于|S|的Y子集就可以获得完备匹配,那么就是: 题目变成只要不满足上面这个条件就能得 ...

  3. python3.7爬取墨菲定律保存在本地txt

    #!/usr/local/bin/python3.7 # -*- coding: utf-8 -*- # @Time: 2019/07/15 # @Function 获取在线文本内容 import r ...

  4. [sqlmap源码阅读] 数据库识别

    通过网页返回的数据库错误信息识别网站所有数据库类型,用到的正则表达式及支持识别的数据库类型,这些信息以xml文件的形式存在,使用 sax 解析xml.

  5. DOM 操作表格

    操作表格<table>标签是 HTML 中结构最为复杂的一个,我们可以通过 DOM 来创建生成它,或者 HTML DOM 来操作它.(PS:HTML DOM 提供了更加方便快捷的方式来操作 ...

  6. Nginx+lua_Nginx+GraphicsMagick来实现实时缩略图

    1.安装GraphicsMagick cd /usr/local/src wget http://sourceforge.net/projects/graphicsmagick/files/graph ...

  7. pytorch 指定GPU训练

    # 1: torch.cuda.set_device(1) # 2: device = torch.device("cuda:1") # 3:(官方推荐)import os os. ...

  8. 【leetcode】403. Frog Jump

    题目如下: 解题思路:我的做法是建立一个字典dic,key为stone,value是一个set,里面存的是从前面的所有stone跳跃到当前stone的unit集合.例如stones=[0,1,2,3] ...

  9. 吸$DN

    旧博客:https://blog.csdn.net/gmh77 从几年前开始用CSDN,见证了CSDN是如何一步步走向辣鸡的 广告?ABP 登录看文章?雨我无瓜账号常年不退 分类要慢慢点也可以接受 前 ...

  10. 数据库智能管理助手-CloudDBA

    摘要:阿里云CloudDBA主要分为离线分析和在线分析两种功能.帮助用户节省成本,定位问题,分析原因并推荐解决方法.CloudDBA可以做到实时诊断,离线诊断和SQL优化.并且通过MySQL的参数调优 ...