Vue简单计算器

最新推荐文章于 2024-04-19 16:48:39 发布

福徐贵

最新推荐文章于 2024-04-19 16:48:39 发布

阅读量158

点赞数

分类专栏： Vue 文章标签： vue html5 html javascript vue.js

本文链接：https://blog.csdn.net/weixin_44299510/article/details/108769864

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue实现简单计算器

v-model双向绑定
修饰符：number
watch监听器

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

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model.number="value1" />
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model.number="value2" />
        <input type="button" value="=" @click="mathFunc" />
        <input type="text" v-model="result" />
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                value1: '',
                value2: '',
                opt: '+',
                result: ''
            },
            methods: {
                calc() {
                    switch (this.opt) {
                        case '+':
                            this.result = this.value1 + this.value2
                            break
                        case '-':
                            this.result = this.value1 - this.value2
                            break
                        case '*':
                            this.result = this.value1 * this.value2
                            break
                        case '/':
                            this.result = this.value1 / this.value2
                            break
                        default:
                            this.result = 0
                    }
                },
                mathFunc() {
                    this.calc();
                }
            },
            watch: {
                opt() {
                    this.calc()
                }
            },

        })
    </script>
</body>

福徐贵

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue简单计算器

Vue实现简单计算器v-model双向绑定修饰符：numberwatch监听器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <script src="./vue.js"></script></head><body>
复制链接

扫一扫