效果：

代码如下：

<!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. mysql必知必会--使用数据处理函数

    函数 与其他大多数计算机语言一样,SQL支持利用函数来处理数据.函数 一般是在数据上执行的,它给数据的转换和处理提供了方便. 在前一章中用来去掉串尾空格的 RTrim() 就是一个函数的例子 函数没有 ...

  2. Codeforces 1301B Motarack's Birthday（二分）

    题目链接:http://codeforces.com/problemset/problem/1301/B 思路: (1)都是-1的情况 (2)只有一个除-1之外的数 (3)至少有两个除-1之外的不同的 ...

  3. 何时使用异步或同步AJAX

    通常最好使用异步调用 通过优锐课核心java学习笔记中,我们可以看到,码了很多专业的相关知识, 分享给大家参考学习. AJAX代表异步JavaScript和XML,是一项允许异步更新网页的技术,这意味 ...

  4. 《自拍教程25》在Linux上配置环境变量

    我们说的环境变量,一般是指的是PATH环境变量, Linux我们用Ubuntu操作系统来举例. 我们从官网下载了Sublime Text的Linux已编译好的包. https://download.s ...

  5. Java基础之四、字符和字符串 异常处理

    字符和字符串是最常用的信息 1:char表示字符 字符常量-两个单引号中间的字符表示字符常量'A' 2:字符串和String 字符串常量-双引号中间的字符序列"Java" 字符串常 ...

  6. 安装vue-devools

    https://blog.csdn.net/weixin_38654336/article/details/80790698

  7. 蓝眼睛与红眼睛（The blue-eyed islanders puzzle）

    澳大利亚的华裔数学神童陶哲轩曾在网上贴出来一个问题 The blue-eyed islanders puzzle 让大家思考,逗大家玩儿. 说一个岛上有100个人,其中有5个红眼睛,95个蓝眼睛.这个 ...

  8. Centos7下安装包方式安装MySQL

    安装包下载地址:https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.27-1.el7.x86_64.rpm-bundle.tar 第一步:在 /h ...

  9. POJ 3253 Fence Repair 贪心 优先级队列

    Fence Repair Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 77001   Accepted: 25185 De ...

  10. 在腾讯云上配置.NetCoreWeb

    1.购买服务器 2.远程登录(账号密码在上图铃铛里的消息里) 3.安装iis 3.安装.NetCore相关 下载最新版本.NET Core Windows Server Hosting https:/ ...