通过Vue实现简单的计算器

Leefs 2019-11-10 PM 2070℃ 0条

# 通过Vue实现简单的计算器

### 前言

学习完Vue中`v-model`指令，可以实现一个简单的计算器，进行一下练习

### 代码实现

1. 1.HTML代码结构

```html
<div id="app">
    <input type="text" v-model="n1">

<input type="text" v-model="result">
</div>
```

2. 2.Vue中实例代码

``` javascript
<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {
            n1: 0,
            n2: 0,
            result: 0,
            opt: '+'
        },
        methods: {
            calc() { // 计算器算数的方法  
                // 逻辑：
                /* 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;
          } */

// 注意：这是投机取巧的方式，正式开发中，尽量少用
                var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
                this.result = eval(codeStr)
            }
        }
    });
</script>
```

*附：Vue入门学习案例和总结都来自于网络中VUE视频教程*

标签: 前端, VUE

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://lilinchao.com/archives/142.html

上一篇 Vue基础入门学习(三)

下一篇【转载】Ajax工作原理和实现步骤

通过Vue实现简单的计算器

评论已关闭

栏目分类

标签云

友情链接申请

通过Vue实现简单的计算器

评论已关闭

 栏目分类

标签云

友情链接申请

栏目分类

标签云

友情链接申请