历史最简单 vue 计算器

最新推荐文章于 2024-06-07 16:03:08 发布

橙子a123

最新推荐文章于 2024-06-07 16:03:08 发布

阅读量48

点赞数

本文链接：https://blog.csdn.net/weixin_68169041/article/details/125720614

版权

前端 vue.js

<!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>
    <script src="./vue.min.js"></script>
</head>
<style>
    button {
        width: 60px;
    }
</style>

<body>
    <div id="box">
        <input type="text" v-model="obj" placeholder="第一个数">
        <!-- <input type="text" v-model="jia" placeholder="+-/*"> -->
        <select name="" id="" v-model="jia">
            <option value="0">+</option>
            <option value="1">-</option>
            <option value="2">/</option>
            <option value="3">*</option>
            <option value="4">%</option>
        </select>
        <input type="text" v-model="ste" placeholder="第二个数">
        <button @click="list()">=</button>
        <input type="text" v-model="job" placeholder="结果">

    </div>
</body>

<script>
    new Vue({
        el: '#box',
        data: {
            obj: '',
            jia: 0,
            ste: '',
            job: '',

        },
        methods: {
            list() {
                if (this.jia == 0) {
                    this.job = Number(this.obj) + Number(this.ste)
                } else if (this.jia == 1) {
                    this.job = this.obj - this.ste
                } else if (this.jia == 2) {
                    this.job = this.obj / this.ste
                } else if (this.jia == 3) {
                    this.job = this.obj * this.ste
                } else if (this.jia == 4) {
                    this.job = this.obj % this.ste
                }
            }
        },
    })


</script>

</html>