vue簡易計算機-コード虫があなたを連れて飛ぶ

3469 ワード

簡易コンピュータケース
1.HTMLコード構造
"app"> type="text" v-model="n1"> 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;

          }

        }

      }

    });