zoukankan      html  css  js  c++  java
  • Vue——实现简易计算器

    效果图

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            <input type="text" v-model='n1'> 
            <!-- 第一个填入的空 -->
     
            <select v-model='opt'>
                <option value="+">加</option>
                <option value="-">减</option>
                <option value="*">乘</option>
                <option value="/">除</option>
            </select>
            <!-- 选择加减乘除 -->
    
            <input type="text" v-model='n2'>
            <!-- 第二个填入的空 -->
    
    
            <input type="button" value="=" @click='calc'>
            <!-- 等于号:点击等于号开始执行计算函数计算 -->
    
            <input type="text" v-model='result'>
            <!-- 结果返回 -->
        </div>
        <script src="../vue/vue.js"></script>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    n1: 0,  //第一个空的默认值
                    n2: 0,  //第二个空的默认值
                    result: 0, //结果
                    opt: '+'   //默认加号
                },
                methods: {
                    calc() {  //计算的函数
                        switch (this.opt) {  //以加减乘除为判断条件
                            case '+':        //如果加就加赋给结果值
                            this.result = parseInt(this.n1) + parseInt(this.n2);
                                break;
                            case '-':        //如果减就减赋给结果值
                            this.result = parseInt(this.n1) - parseInt(this.n2);
                                break;
                            case '*':        //如果乘就乘赋给结果值
                            this.result = parseInt(this.n1) * parseInt(this.n2);
                                break;
                            case '/':        //如果除就除赋给结果值
                            this.result = parseInt(this.n1) / parseInt(this.n2);
                                break;
                        }
                    }
                }
            })
        </script>
    </body>
    
    </html>
  • 相关阅读:
    qq链接
    HTML5获取地理坐标
    AJAX的同步和异步的区别
    取消版本控制
    格式化打印数组函数
    图片返回刷新
    从哪些方面优化网站
    朋友圈的基本数据结构设计是怎样的?既能做到完美阅读权限设置,又能兼顾性能?
    表单提交数据安全性验证
    自然世界的划分
  • 原文地址:https://www.cnblogs.com/yangpeixian/p/11703146.html
Copyright © 2011-2022 走看看