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

Devops海洋的渔夫

发布于 2022-01-17 09:18:00

6270

发布于 2022-01-17 09:18:00

文章被收录于专栏：Devops专栏

需求

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

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="app">

        <!-- 输入计算器的第一个数 n1 -->
        <input type="text" v-model="n1">

        <!-- 设置加减乘除 -->
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>

        <!-- 输入计算器的第二个数 n2 -->
        <input type="text" v-model="n2">

        <!-- 设置等号=作为监听事件，计算结果 -->
        <input type="button" @click="calc" value="=">

        <!-- 显示结果的值 -->
        <input type="text" v-model="result">

    </div>

    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

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

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

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

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

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

        })
    </script>

</body>
</html>

浏览器执行如下：