<!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. BUUCTF--rsa

    测试文件:https://buuoj.cn/files/ed10ec009d5aab0050022aee131a7293/41c4e672-98c5-43e5-adf4-49d75db307e4.zi ...

  2. 第一个chrome extension

    如今,chrome浏览器的使用如越来越流行,chrome extension往往能提供更多很丰富的功能.以前一直想了解这方面的东西,可是又担心很复杂.前段时间,在斗鱼看一个直播,想刷弹幕,但是每次自己 ...

  3. Docker设置容器开机自启动

    设置如下: docker update --restart=always 镜像ID 例如:docker update --restart=always e39a959d7bff. 参考:https:/ ...

  4. python之流程控制升级

    python之流程控制:if elif else  while  for 一.流程控制之if: 1.1为什要有if判断:让计算机能像人一样代替人类工作,那么计算机应该有对于事务的读错,真假,是否可行的 ...

  5. mysql清空表数据并重置自增ID

    mysql清空表数据并重置自增ID: ## 查看mysql> select * from work_order_company;mysql> show create table work_ ...

  6. 洛谷P3158 [CQOI2011]放棋子 组合数学+DP

    题意:在一个m行n列的棋盘里放一些彩色的棋子,使得每个格子最多放一个棋子,且不同颜色的棋子不能在同一行或者同一列.有多少祌方法? 解法:这道题不会做,太菜了qwq.题解是看洛谷大佬的. 设C是组合数, ...

  7. 新特性2-lambda表达式

    最近几天学习了一下lambda表达式,看了不少博客,感觉有一篇博客总结的一句话总结的很好:lambda表达式是一段可以传递的代码,它的核心思想是将面向对象中的传递数据变成传递行为.其实以前也有传递行为 ...

  8. layui树形表格支持非异步和异步加载

    layui树形表格支持非异步和异步加载. 仓库地址:https://gitee.com/uniqid/ 使用示例如下: <div class="uui-admin-common-bod ...

  9. bzoj5015 [Snoi2017]礼物 矩阵快速幂+二项式展开

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=5015 题解 设 \(f_i\) 表示第 \(i\) 个朋友的礼物,\(s_i\) 表示从 \( ...

  10. mybatis返回新增对象的主键

    加这两行就可以返回这个插入对象的自增的主键<insert id="insertSeatPortraitData" parameterType="seatPortra ...