8. Vue 使用v-model实现计算器示例

需求

上一篇章介绍了使用v-model双向绑定「表单元素」的value与Vue中的data数据，那么利用该特性来写一个加减乘除的计算器。

示例

代码语言：javascript

复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
&lt;div id=&#34;app&#34;&gt;

    &lt;!-- 输入计算器的第一个数 n1 --&gt;
    &lt;input type=&#34;text&#34; v-model=&#34;n1&#34;&gt;

    &lt;!-- 设置加减乘除 --&gt;
    &lt;select v-model=&#34;opt&#34;&gt;
        &lt;option value=&#34;+&#34;&gt;+&lt;/option&gt;
        &lt;option value=&#34;-&#34;&gt;-&lt;/option&gt;
        &lt;option value=&#34;*&#34;&gt;*&lt;/option&gt;
        &lt;option value=&#34;/&#34;&gt;/&lt;/option&gt;
    &lt;/select&gt;

    &lt;!-- 输入计算器的第二个数 n2 --&gt;
    &lt;input type=&#34;text&#34; v-model=&#34;n2&#34;&gt;

    &lt;!-- 设置等号=作为监听事件，计算结果 --&gt;
    &lt;input type=&#34;button&#34; @click=&#34;calc&#34; value=&#34;=&#34;&gt;

    &lt;!-- 显示结果的值 --&gt;
    &lt;input type=&#34;text&#34; v-model=&#34;result&#34;&gt;

&lt;/div&gt;

&lt;!--  1.导入vue.js库  --&gt;
&lt;script src=&#34;lib/vue.js&#34;&gt;&lt;/script&gt;

&lt;script&gt;
    // 2. 创建一个Vue的实例
    var vm = new Vue({
        el: &#39;#app&#39;,
        data: {
            n1: 0,
            n2: 0,
            result:0,
            opt: &#34;+&#34; // 设置默认为加法
        },
        methods:{
            calc(){
                // 根据设置的计算方法进行计算
                switch (this.opt) {

                    case &#34;+&#34;: // 加法
                        this.result = parseFloat(this.n1) + parseFloat(this.n2);
                        break;

                    case &#34;-&#34;: // 减法
                        this.result = parseFloat(this.n1) - parseFloat(this.n2);
                        break;

                    case &#34;*&#34;: // 乘法
                        this.result = parseFloat(this.n1) * parseFloat(this.n2);
                        break;

                    case &#34;/&#34;: // 除法
                        this.result = parseFloat(this.n1) / parseFloat(this.n2);
                        break;
                }
            }
        }

    })
&lt;/script&gt;

</body>

</html>

浏览器执行如下：