v-model的小案例---计算器的实现

第一种方法:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="app">

        <!-- 输入的一个数字 -->

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

        <!-- 符号的获取+ - * / -->

        <select v-model="opt">

            <option value="+">+</option>

            <option value="-">-</option>

            <option value="*">*</option>

            <option value="/">/</option>

        </select>

        <!-- 第二个数字的获取 -->

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

        <!-- 点击等号算出结果 -->

        <button @click="calc">=</button>

        <!-- 最终的计算结果 -->

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

    </div>

    <script>

        new Vue({

            el: "#app",

            data: {

                n1: 0,

                n2: 0,

                result: 0,

                opt: '+'

            },

            methods: {

                calc() {

                    switch (this.opt) {

                        case '+':

                            this.result = Number(this.n1) + Number(this.n2)

                            break;

                        case '-':

                            this.result = Number(this.n1) - Number(this.n2)

                            break;

                        case '*':

                            this.result = Number(this.n1) * Number(this.n2)

                            break;

                        case '/':

                            this.result = Number(this.n1) / Number(this.n2)

                            break;

                    }

                }               

            }

        })

    </script>

第二种方法:

 

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="app">

        <!-- 输入的一个数字 -->

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

        <!-- 符号的获取+ - * / -->

        <select v-model="opt">

            <option value="+">+</option>

            <option value="-">-</option>

            <option value="*">*</option>

            <option value="/">/</option>

        </select>

        <!-- 第二个数字的获取 -->

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

        <!-- 点击等号算出结果 -->

        <button @click="calc">=</button>

        <!-- 最终的计算结果 -->

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

    </div>

new Vue({

            el: "#app",

            data: {

                n1: 0,

                n2: 0,

                result: 0,

                opt: '+'

            },

            methods: {

                calc() {                 

                    calc(){

                     var codestr='Number(this.n1) '+this.opt+ 'Number(this.n2)'

                     this.result=eval(codestr)

                    }

            }

        })

    </script>