vue简易计算器—码虫带你飞

简易计算机案例

1.HTML 代码结构

"app">

    type="text" v-model="n1">

    "opt">

      <option value="0">+option>

      <option value="1">-option>

      <option value="2">*option>

      <option value="3">÷option>

    

    type="text" v-model="n2">

    type="button" value="=" v-on:click="getResult">

    type="text" v-model="result">

  

2.vue实例代码

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        n1: 0,

        n2: 0,

        result: 0,

        opt: '0'

      },

      methods: {

        getResult() {

          switch (this.opt) {

            case '0':

              this.result = parseInt(this.n1) + parseInt(this.n2);

              break;

            case '1':

              this.result = parseInt(this.n1) - parseInt(this.n2);

              break;

            case '2':

              this.result = parseInt(this.n1) * parseInt(this.n2);

              break;

            case '3':

              this.result = parseInt(this.n1) / parseInt(this.n2);

              break;

          }

        }

      }

    });