效果：

代码如下：

<!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. C# 根据天、周、月汇总统计生成统计报表

    先看核心代码: public List<DataEntity> SearchShopSalesReport(DateTimeOffset? dateFrom, DateTimeOffset ...

  2. leetcode面试题 02.06. 回文链表，解题心路

    目录 leetcode面试题 02.06. 回文链表,解题心路 1.题目描述 2.java语言题解一 3.java语言题解二 4.C语言题解一 leetcode面试题 02.06. 回文链表,解题心路 ...

  3. MFC/QT 学习笔记（四）——MFC基于对话框学习控件（下）

    //5.列表控件 ListControl 属性 报表模式 view:Report:添加变量 //Cdemo5Dlg.cpp ps:资源视图 右键 类向导 成员变量 查看对象所属类 // TODO: 在 ...

  4. Python+PyQT5的子线程更新UI界面的实例《新手必学》

    今天小编就为大家分享一篇Python+PyQT5的子线程更新UI界面的实例,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧子线程里是不能更新UI界面的,在移动端方面.Android的U ...

  5. java开发病房管理系统

    开发环境: Windows操作系统开发工具: Myeclipse+Jdk+Tomcat+MySQL数据库 运行效果图 源码及原文链接:https://javadao.xyz/forum.php?mod ...

  6. Django单元测试中Fixtures用法

    在使用单元测试时,有时候需要测试数据库中有数据,这时我们可以使用Django的Fixtures来生成测试数据. 基础配置 在settings.py 中配置如下内容: FIXTURE_DIRS = (' ...

  7. Null项目参与排序

    1.item1升序,item2升序,item3(存在NULL项目,NULL项目排在后面)升序   Collections.sort(list, Comparator.comparing(Bean::g ...

  8. 手把手教你如何构建Vue前端组件库

    在前端开发中可能会遇到将相同的功能模板集合成一个组件,供他人调用,这样可以减少重复造轮子,也可以节约人力.财力,更能够提高代码的可维护度:下面将通过详细的步骤教你如何构建一个Vue前端组件. 1.在本 ...

  9. 保存为pickle

    保存为pickle import pickle # 保存模型 with open('model.pickle', 'wb') as f: pickle.dump(model, f) # 读取模型 wi ...

  10. 正则表达式之match方法

    一直以来,对正则表达式都是非常的恐惧的,以至于学习接口自动化时,到了正则,我就想放弃,于是乎,我将近有一个多月没有继续学习.某天睡醒,阳光正好,摊在床上冥想,我不能被眼前的坎挡住了我前进的路呀,说干就 ...