2019.4.21 vue.js day5用vue实现简易的计算器

原创于 2019-04-21 22:34:15 发布 · 248 阅读

0 ·

CC 4.0 BY-SA版权

vue.js学习专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的基本计算器应用，通过HTML和JavaScript结合，演示了输入、选择操作和计算结果的功能。用户可以输入两个数值，选择运算符，然后点击等号按钮得到计算结果。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="n1">

    <select name="" id="optionS" v-model="opt">
        <option>+</option>
        <option>-</option>
        <option>*</option>
        <option>/</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" value="=" @click="calculate">
    <input type="text" v-model="result">
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            n1: 0,
            opt:'+',
            n2: 0,
            result:0

        },
        methods: {

             calculate (){
                 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>