vue实现网页简单计算器实例代码

效果:

代码如下:

<!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>

原文地址:https://www.cnblogs.com/Mishell/p/12243355.html

时间: 2024-10-09 18:10:17

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

Javascript 实现简单计算器实例代码

Javascript 实现简单计算器实例代码 这篇文章主要介绍了Javascript 实现简单计算器实例代码的相关资料,需要的朋友可以参考下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

简单计算器设计代码

#import "AppDelegate.h" #define kScreenWidth CGRectGetWidth([[UIScreen mainScreen] bounds]) #define kScreenHeight CGRectGetHeight([[UIScreen mainScreen] bounds]) #define kButtonWidth ((kScreenWidth - 5) / 4) #define kButtonHeight kButtonWidth #d

javascript简单计算器代码分析

javascript简单计算器代码分析:也许网页中需要一个简单的计算器功能,这个时候就要掌握如何编写,起码应该会修改,下面就通过一个简单的实例介绍一下如何实现简单的计算器效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&

防止点击退格键使网页后退实例代码

防止点击退格键使网页后退实例代码:有些经常使用编辑器的朋友可能会遇到这样的现象,当使用退格键BackSpace删除文本的时候,并没有实现这个效果,而是使网页发生后退现象,这是一件非常恼人的事情,因为有时候已经编辑好的内容就此消失,下面就简单介绍一下如何阻止这样的情况发生.代码如下: $(document).keydown(function(e){ var doPrevent; if(e.keyCode==8){ var d=e.srcElement||e.target; if(d.tagName

可以固定的顶部的导航菜单简单实例代码

可以固定的顶部的导航菜单简单实例代码:固定于网页顶部的导航栏效果在当下网站比较流行,所谓的固定于网页的顶部一般来说并不是一直固定于顶部,而是在开始是位于某一个位置,当下拉滚动条使其到达顶部的时候才会固定在顶部,下面通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" con

初学者如何做一个简单的计算器,代码分享

先新建一个类 startCalculator 声明如下 #import <Foundation/Foundation.h> @interface StartCalculator : NSObject //声明两个要计算的变量 @property float opValue1; @property float opValue2; //声明一个运算符 @property char op; //普通方法 //- (float) gzyWorkAdd; // //- (float) gzyWorkSu

原生ajax调用数据简单实例代码

原生ajax调用数据简单实例代码:由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的ajax有所了解的好,下面就是一段ajax数据调用的实例代码,非常的简单,初学者可以参考一下.代码如下:一.兼容浏览器部分: function xmlHttpR() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=ne

完整的网页浮动层拖动实例代码

一个供学习不错的网页拖动层,具有丰富的层拖动设置功能,比如可设置拖动的范围.垂直.水平方向拖动,是否透明显示层等,运用JS和CSS等实现的HTML层拖动网页,代码完整:前端框架资源分享 .代码   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

ASP.NET 网页中的嵌入式代码块

将代码添加到 ASP.NET 网页中的默认模型要么创建一个代码隐藏类文件(代码隐藏页),要么将页的代码写到具有 runat="server" 特性的 script 块中(单文件页). 编写的代码通常会与页上的控件进行交互. 例如,通过从代码中设置控件的 Text(或其他)属性,可以在页上显示信息. 另一种可能是使用嵌入式代码块将代码直接嵌入到页中. 嵌入式代码块 嵌入式代码块是在呈现页面的过程中执行的服务器代码. 块中的代码可以执行编程语句,并调用当前页类中的函数. 下面的代码示例演示