效果：

代码如下：

<!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. Executor 任务执行器

    Executor: 是一个接口 用于执行提交的任务 解耦任务提交和执行(线程的创建及调度) Executor的实现可以根据实际需求延展不同的逻辑:1. 对于提交的任务同步或者异步执行,如下同步执行: ...

  2. pikachu-服务器端请求伪造SSRF(Server-Side Request Forgery)

    一.SSRF概述(部分内容来自pikachu平台) SSRF(Server-Side Request Forgery:服务器端请求伪造),其形成的原因大都是由于服务端提供了从其他服务器应用获取数据的功 ...

  3. SAP MM 一个含有多个账号分配对象的行项目的PO及其收货

    SAP MM 一个含有多个账号分配对象的行项目的PO及其收货 如下的采购订单,一个行项目数量为8PC,分别对应8个固定资产号, 在该ITEM的科目分配里,按数量做了拆分,每个数量对应一个固定资产号.如 ...

  4. Android Studio 学习笔记(四)：Adapter和RecyclerView说明

    在现版本中,滚动控件有多种,而相比于ListView,GridView,RecyclerView的用途更广,因此将前两者作为Adapter适配器的引入,再对RecyclerView进行简单讲解. MV ...

  5. SVN状态图标不显示的解决办法

    第一步:检查设置 右键->TortoiseSVN->setting->Icon Overlays->Status cache->default/Shell.或者 右键-& ...

  6. 在香蕉派的树莓派系统上配置 Syncthing 自启动

    在香蕉派的树莓派系统上配置 Syncthing 自启动 —— 魏刘宏 2020 年 1 月 19 日 首先做个名词解释,” 香蕉派” 是国内一款山寨树莓派的硬件产品,” 树莓派系统” 指的是”rasp ...

  7. 小白的linux笔记11：放弃gitbook，转战Sphinx

    gitbook生成的html目录不折叠且链接失效 装好了gitbook和nodejs,本以为可以安心的做电子书了. 谁想到gitbook慢的一P,而且导出来的html目录不折叠,最关键的是链接有问题, ...

  8. 应用场景不同，是无代码和低代码的最大区别 ZT

    随着媒体对低代码.无代码等先进技术的持续关注,我们发现大多数人都听说过低代码开发和无代码开发这两个概念,但是对两者之间的区别其实并不清楚.事实上,低代码开发和无代码开发之间存在着很多非常显著的差异,如 ...

  9. 面向对象编程（什么是对象）——java

    一.什么是面向对象,什么是面向过 二.引入对象和类的概念 对象:是具体事物 如:小明 汽车 类: 是对对象的抽象(抽象 抽出象的部分) Person 先有具体的对象,然后抽象各个对象之间的部分,归纳出 ...

  10. H5网页布局+css代码美化

    HTML5的结构化标签,对搜索引擎更友好 li 标签对不利于搜索引擎的收录,尽量少用 banner图片一般拥有版权,不需要搜索引擎收录,因此可以使用ul + li <samp></s ...