vue案例-加法计算器

最新推荐文章于 2024-05-16 01:51:55 发布

骆骆爱学习

最新推荐文章于 2024-05-16 01:51:55 发布

阅读量618

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_34082921/article/details/128553250

版权

使用vue写了一个简单的计算器，只能实现数值加法计算，有兴趣的小伙伴可以看看

首先需要先引入vue文件

效果图

在这里插入图片描述

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            text-align: center;
            height: 400px;
            width: 300px;
            border: solid 1px gray;
            margin: auto
        }

        input {
            margin: 15px 0;
        }

        /* #app .content {
            border: solid 1px gray;
            height: 350px;
            width: 250px;
            margin: auto;
        } */
        input[type="text"]{
            margin-left: 5px;
            height: 20px;
        }
        input[value="计算"] {
            height: 30px;
            font-weight: bold;
            width: 200px;
            border: solid 1px black;
            
            border-radius: 5px;

        }
        input[value="清除"] {
            height: 30px;
            font-weight: bold;
            width: 200px;
            border: solid 1px brown;
            color: brown;
            border-radius: 5px;
        }
        #app span:last-of-type{
            color: brown;
            font-size: 30px;
            font-weight: bold;
            font-family: '微软雅黑';
            vertical-align: middle;
            
           
        }

        h2 {
            text-align: center;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>加法计算器</h2>


        <span>数值A</span><input type="text" name="" id="" v-model="number_1"><br>
        <span>数值B</span><input type="text" name="" id="" v-model="number_2"><br>
        <!-- <input type="button" value="计算" name="" id="" @click="sum=parseFloat(number_1) + parseFloat(number_2)"><br> -->
        <input type="button" value="计算" name="" id="" @click="sumber"><br>
        <input type="button" value="清除" name="" id="" @click="clearSumber"><br>
        <span>计算结果：</span><span v-text="sum"></span>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    number_1: null,
                    number_2: null,
                    sum: 0
                }
            },
            methods: {
                sumber: function () {
                    this.sum = parseFloat(this.number_1) + parseFloat(this.number_2)
                    console.log(typeof (this.sum));
                },
                clearSumber:function(){
                    this.number_1 = ""
                    this.number_2 = ""
                    this.sum = 0
                }
            },
            computed: {

            }

        })
    </script>
</body>

</html>