效果：

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="js/vue.js" ></script>

    </head>

    <body>

        <div id="app">

            <input type="text" v-model="num1" />

            <select v-model="opt">

                <option value="+">+</option>

                <option value="-">-</option>

                <option value="*">*</option>

                <option value="/">/</option>

            </select>

            <input type="text" v-model="num2"  />

            <button @click="getResult" >=</button>

            <input type="text" v-model="res" />

        </div>

        <script type="text/javascript">

            var vm = new Vue({

                el:"#app",

                data:{

                    num1:0,

                    num2:0,

                    opt:'+',

                    res:0

                },

                methods:{

                    getResult(){

                        console.log(this.opt)

                        var str = 'Number(this.num1)'+this.opt+'Number(this.num2)'

//                        eval函数是把参数当做能执行的代码来执行

                        this.res = eval(str)

                    }

                }

            })

        </script>

    </body>

</html>

vue实现网页简单计算器实例代码的更多相关文章

  1. C#网页版计算器程序代码

    calculator.aspx.cs代码 using System; using System.Collections.Generic; using System.Linq; using System ...

  2. PHP分多步骤填写发布信息的简单方法实例代码

    1.php 复制代码 代码如下: <form name=form1 id=form1 method=post action=2.php> 基本信息1:<input type=text ...

  3. Ajax 简单的实例代码

    <!DOCTYPE HTML><html><head><script src="http://libs.baidu.com/jquery/2.0.0 ...

  4. vue简单实例代码

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  5. seo之google rich-snippets丰富网页摘要结构化数据（微数据）实例代码

    seo之google rich-snippets丰富网页摘要结构化数据(微数据)实例代码 网页摘要是搜索引擎搜索结果下的几行字,用户能通过网页摘要迅速了解到网页的大概内容,传统的摘要是纯文字摘要,而结 ...

  6. vue服务端渲染简单入门实例

    想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目.然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好. 话不多说,笔者也是研究多日才搞明白这个服务 ...

  7. Qt简单项目--加法计算器(详细代码注释)

    Qt的简单案例--加法计算器(详细代码注释) 一.项目结构 二.项目代码 widget.h #ifndef WIDGET_H #define WIDGET_H //预编译指令, 为了避免头文件被重复包 ...

  8. Vue学习之路之登录注册实例代码

    Vue学习之路之登录注册实例代码:https://www.jb51.net/article/118003.htm vue项目中路由验证和相应拦截的使用:https://blog.csdn.net/wa ...

  9. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

随机推荐

  1. 基于HttpURLConnection的接口调用，支持GET&POST

    单位要做一个多级部署平台,大概意思就是一级系统可以监控下属地域的数据也可管理本地的数据.之前做短信猫用过httpClient请求,与此大同小异.封装了一个两种请求方式的工具类. package com ...

  2. C——简单计算器（HDU1237）

    题目: 读入一个只包含 +, -, *, / 的非负整数计算表达式,计算该表达式的值.  Input测试输入包含若干测试用例,每个测试用例占一行,每行不超过200个字符,整数和运算符之间用一个空格分隔 ...

  3. Linux下使用Nginx

    模拟tomcat集群 1.下载tomcat7,/usr/local下新建目录tomcat,将tomcat7剪切到/usr/local/tomcat wget http://mirror.bit.edu ...

  4. Javascript 基础学习（四）js 的语句

    由于程序都是自上向下的顺序执行的,所以通过流程控制语句可以改变程序执行的顺序,或者反复的执行某一段的程序. 语句的分类 条件判断语句 条件分支语句 循环语句 条件判断语句 条件判断语句也称为if语句 ...

  5. Cesium案例解析(五)——3DTilesPhotogrammetry摄影测量3DTiles数据

    目录 1. 概述 2. 案例 3. 结果 1. 概述 3D Tiles是用于传输和渲染大规模3D地理空间数据的格式,例如摄影测量,3D建筑,BIM / CAD,实例化特征和点云等.与常规的模型文件格式 ...

  6. kernel定制，编译内核

    定制kernel,就需要手动编译内核 一,准备开发环境 1,包组:Development Tools,Server Platform Development 2,包:ncurses和ncurses-d ...

  7. 展讯sprd_battery.c 充电驱动

    sprd_battery.c 是充电驱动,这个是充电功能的核心内容,电量显示策略.温度检测策略.充电保护机制等功能在这里实现,功能实现与硬件细节剥离,调用通用接口实现逻辑控制: 1 sprdbat_p ...

  8. npm常用命令和脚手架使用

    最近前端同学使用最多的莫过于vue,angualr,react等热门前端框架了.那么就避免不掉的使用npm命令,本人就经常因为这三个脚手架的使用而不得不百度相应的npm命令,不胜其烦,,,因此就整理一 ...

  9. Blazor client-side + webapi （.net core 3.1） 添加jwt验证流程（非host）第三章 客户端存储及验证

    准备工作: 安装Nuget包:Blazored.LocalStorge. 这是一个client-side 浏览器存储库,找了非常久. 官方文档中也有一款Microsoft.AspNetCore.Pro ...

  10. kong服务网关API

    kong服务网关API pingforever关注 0.1762017.05.23 11:16:08字数 834阅读 7,367 kong简介 Kong 是在客户端和(微)服务间转发API通信的API ...