前端-Vue计算器 day02

好&好

于 2024-07-17 21:57:41 发布

阅读量227

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_58719141/article/details/140506590

版权

简单易懂的加减乘除计算器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <input type="number" v-model="value1">
        <select name="" id="" v-model="ve">
        //使用下拉菜单添加 运算符 并且给select设置v-model,从而获取当前显示的运算符进行判断
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="number" v-model="value2">
        =
        <input type="number" v-model="value3">
        <button @click="comput">计算</button>
    </div>
</body>
<script>

    let vm = new Vue({
        el: '#app',
        data: {
            value1: '',
            value2: '',
            value3: '',
            ve: '+'
        },
        methods: {
            comput() {
            //点击计算  开始判断当前运算符
                if (this.ve == '+') {
                    this.value3 = Number(this.value1) + Number(this.value2)
                } else if (this.ve == '-') {
                    this.value3 = Number(this.value1) - Number(this.value2)
                } else if (this.ve == '*') {
                    this.value3 = Number(this.value1) * Number(this.value2)
                } else {
                    this.value3 = Number(this.value1) / Number(this.value2)
                }
            }
        }
    })
</script>

</html>