<!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. BZOJ 1908. Pku2054 UVA1205 Color a Tree

    传送门 看一眼感觉 $dp$,发现状态没法维护 考虑贪心,然后就想了两个错的贪心... 正解好神啊 首先如果权值最大的点能够一步染色那么肯定要染它 意思就是,一旦父节点被染色那么它就要接着被染色 那么 ...

  2. JS中兼容问题的汇总

    获取非行内样式的兼容方式 function getStyle(obj,attr){ //获取非行间样式,obj是对象,attr是值 if(obj.currentStyle){ //针对ie获取非行间样 ...

  3. fullpage.js版本3.0.5报错问题（licenseKey）

    在文件里搜索licenseKey,删除!不会对程序造成任何影响

  4. Shell脚本的fork炸弹

    #!bin/bash#功能:快速消耗计算机资源,致使计算机死机#作者:liusingbon#定义函数名为.(点), 函数中递归调用自己并放入后台执行function . { .|.& };.

  5. docker安装es

    下载镜像 docker pull docker.elastic.co/elasticsearch/elasticsearch:6.8.1 创建容器并映射docker run -e ES_JAVA_OP ...

  6. linux--基础知识1

    #进入终端窗口,root命令提示符#,普通用户登陆提示符$,切换终端用户 ctrl+shift+F2,退出终端命令exit #init 0 关机  reboot 重启  ls查看当前目录下文件  ls ...

  7. thinkphp 数据库连接报错 SQLSTATE[HY000] [2002] No such file or directory

    https://blog.csdn.net/tornge/article/details/51388233 找到mysql sokcet的路径 vim /etc/mysql/mysql.conf.d/ ...

  8. 触发写Redo&nbsp;Log的条件

    参见:http://www.ixora.com.au/notes/redo_write_triggers.htm http://www.eygle.com/archives/2005/02/redoa ...

  9. 解决安装mysql-connector-odbc-5.3.2 错误1918……不能加载安装或转换器库……的BUG

    还是在虚拟机Windows Server 2003上安装mysql-connector-odbc-5.3.2,装着装着就报错了,大致是“错误1918……不能加载安装或转换器库……”,问我Retry,I ...

  10. Oracle DB 查看预警日志

    “Database(数据库)”主页>“Related Links相关链接)”区域> “Alert Log Content (预警日志内容)” 查看预警日志每个数据库都有一个alert_&l ...