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

最新推荐文章于 2019-04-22 16:59:40 发布

猫四怡惑Yino

最新推荐文章于 2019-04-22 16:59:40 发布

阅读量197

点赞数

分类专栏： vue.js学习

本文链接：https://blog.csdn.net/Janokaty/article/details/89441346

版权

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

7 篇文章 0 订阅

订阅专栏

代码如下：

<!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>

猫四怡惑Yino

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2019.4.21 vue.js day5用vue实现简易的计算器

代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script></head>...
复制链接

扫一扫