Vue实现简单计算器

本文实例为大家分享了Vue实现简单计算器的具体代码，供大家参考，具体内容如下

案例需求

案例思路

1、通过v-model 指令 实现数值A和数值B的绑定
2、给计算按钮绑定事件，实现计算逻辑
3、将计算结果绑定到对应位置

实现静态页面

div id='app'>
        h1>
    简单计算器/h1>
        div>
    span>
    数值A:/span>
    span>
    input tyPE="text" v-model='a'>
    /span>
    /div>
        div>
    span>
    数值B:/span>
    span type="text" v-model='b'>
    /span>
    /div>
        div>
    button>
    计算/button>
    /div>
        div>
    span>
    计算结果/span>
    span>
    /span>
    /div>
    /div>
    

导入Vue

script type="text/javascript" src="js/vue.js">
    /script>
    

为静态页面添加指令

div id='app'>
        h1>
    简单计算器/h1>
        div>
    span>
    数值A:/span>
          span>
            input type="text" v-model='a'>
          /span>
        /div>
        div>
          span>
    数值B:/span>
          span>
            input type="text" v-model='b'>
          /span>
        /div>
        div>
          button v-on:click="handle">
    计算/button>
        /div>
        div>
    span>
    计算结果/span>
    span v-text="result">
    /span>
    /div>
    /div>
    

设置 计算功能

script type="text/javascript">
    /* */    VAR vm = new Vue({
      el: "#app",      data: {
        a: '',        b: '',        result: ''      }
,      methods: {
        handle: function () {
              // 实现计算逻辑          this.result = parseint(this.a) + parseInt(this.b);
        }
      }
    }
    );
    /script>
    

最终代码

!DOCTYPE htML>
    html lang="en">
    head>
      meta charset="UTF-8">
      meta name="viewport" content="width=device-width, inITial-scale=1.0">
      title>
    简单计算器/title>
    /head>
    body>
      div id='app'>
        h1>
    简单计算器/h1>
        div>
    span>
    数值A:/span>
          span>
            input type="text" v-model='a'>
          /span>
        /div>
        div>
          span>
    数值B:/span>
          span>
            input type="text" v-model='b'>
          /span>
        /div>
        div>
          button v-on:click="handle">
    计算/button>
        /div>
        div>
    span>
    计算结果/span>
    span v-text="result">
    /span>
    /div>
      /div>
      script type="text/javascript" src="js/vue.js">
    /script>
      script type="text/javascript">
    /* */    var vm = new Vue({
      el: "#app",      data: {
        a: '',        b: '',        result: ''      }
,      methods: {
        handle: function () {
              // 实现计算逻辑          this.result = parseInt(this.a) + parseInt(this.b);
        }
      }
    }
    );
      /script>
    /body>
    /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• Vue.js实现的计算器功能完整示例
• Vue.js实现价格计算器功能
• vue.js实现的经典计算器/科学计算器功能示例
• 使用Vue实现简单计算器
• vue实现计算器功能
• vue.js实现简单的计算器功能
• Vue实现简易计算器
• Vue.js实现立体计算器
• Vue实现手机计算器
• vue实现简单加法计算器

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！