效果：

代码如下：

<!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. 学Python必背的初级单词，你都背了吗？

    今天给大家分享一些学习Python必须认识的英文单词,同时也是学习编程都必须会的单词,新手赶快学起来!有点长耐心看完. 小编推荐一个学Python的学习裙:九三七六六七 五零九,无论你是大牛还是小白, ...

  2. 2020年如何成为一个高级AVA架构师（50W~100W年薪）

    2020年如何成为一个高级AVA架构师(50W~100W年薪)

  3. go 环境及4开发

    国内加速 在gopath目录执行 go env -w GOPROXY=direct go env -w GOSUMDB=off go env -w GOPROXY=https://goproxy.io ...

  4. vue-cli-service 报错

    错误内容: vue-cli-service serve /bin/sh: vue-cli-service: command not found error Command failed with ex ...

  5. 最短路径：初涉Dijkstra算法

    模板题目:https://www.luogu.com.cn/problem/P1339 我的代码: #include<cstdio> #include<cstring> #in ...

  6. Galactic Collegiate Programming Contest Gym - 101572G 模拟

    #include<bits/stdc++.h> using namespace std; int n,m; struct node { int id; int slove; int pen ...

  7. eclipse maven jdk1.8 还原站点项目红感叹号总是小结

    问题背景有三 maven 默认是jdk1.5jdk1.8 目录文件夹不全操作: 在项目上右击-> build path-->config build path-->libraries ...

  8. 消息队列MQ如何保证高可用性？

    保证MQ的高可用性,主要是解决MQ的缺点--系统复杂性变高--带来的问题 主要说一下  rabbitMQ  和  kafka  的高可用性 一.rabbitMQ的高可用性 rabbitMQ是基于主从做 ...

  9. 安装MongoDB到Ubuntu（APT）

    运行环境 系统版本:Ubuntu 16.04.5 LTS 软件版本:mongodb-org-4.0.8 硬件要求:无 安装过程 1.配置APT-Mongodb存储库 ATP-Mongodb存储库由Mo ...

  10. Wilson's Theorem

    ProofsSuppose first that $p$ is composite. Then $p$ has a factor $d > 1$ that is less than or equ ...