<!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. jmeter 线程数—请求数详解

    一个性能测试请求负载是基于一个线程组完成的.一个测试计划必须有一个线程组.测试计划添加线程组非常简单.在测试计划右键弹出下拉菜单(添加-->Threads(Users)--->线程组)中选 ...

  2. SAAS多租户数据逻辑隔离

    基于Mybatis 的SAAS应用多租户数据逻辑隔离 package com.opencloud.common.interceptor;import org.apache.commons.lang3. ...

  3. [翻译]解释JavaScript中的类型转换

    原文地址:JavaScript type coercion explained 类型转换是将值从一种类型转换为另一种类型的过程(比如字符串转换为数值,对象转换为布尔值,等等).任何类型,无论是原始类型 ...

  4. 从excel表中生成批量SQL

    excel表格中有许多数据,需要将数据导入数据库中,又不能一个一个手工录入,可以生成SQL,来批量操作.   ="insert into Log_loginUser (LogID, Logi ...

  5. windows 如何将安装Anaconda之前已经安装的python版本（中已安装的库）移动到 Anaconda中

    题目]如何将安装Anaconda之前已经安装的python版本(中已安装的库)移动到 Anaconda中 一.概述 之前安装tensorflow的安装了anaconda并用它进行安装,anaconda ...

  6. python if-else替代三元表达式

    python中判断一个数是否是偶数的常规代码: def _compare(data): if data % 2 == 0: return True else: return False # 调用偶数判 ...

  7. Java第二阶段之常用类

    包装类缓存-128到127之间的数字(系统初始的时候就创建了,当我们调用ValueOf时,首先检查是否在范围内,在则直接取用)integer in1 ＝ integer.valueOf(-128):i ...

  8. 正则化的L1范数和L2范数

    范数介绍:https://www.zhihu.com/question/20473040?utm_campaign=rss&utm_medium=rss&utm_source=rss& ...

  9. 命令——tr

    文本处理工具命令——tr 一帮助说明 TR() User Commands TR() NAME tr - translate or delete characters SYNOPSIS tr [OPT ...

  10. Linux内核设计与实现 总结笔记（第七章）中断和中断处理

    中断和中断处理 处理器的速度跟外围硬件设备的速度往往不再一个数量级上,因此,如果内核采取让处理器向硬件发出一个请求. 然后专门等待回应的办法,如果专门等待回应,明显太慢.所以等待期间可以处理其他事务, ...