【Vue】v-bind & v-model指令的使用（实现计算器效果）

50 阅读 0 评论 33 点赞

我是靠谱客的博主乐观黄豆，最近开发中收集的这篇文章主要介绍【Vue】v-bind & v-model指令的使用（实现计算器效果），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在Vue学习笔记（一）中，我们已经了解了Vue中的基本指令，比如 v-text，v-html，v-bind，v-on 等指令的使用，并且介绍了 MVVM 模式，那么怎么实现动态的在M和V之间数据传递呢？本文我们就来介绍下 v-model 这个非常有用的指令。

v-bind指令

v-bind 可以获取vue对象中的数据，但是这个指令只能实现 M 到 V 的数据传递，反过来实现不了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
    <div id="app">
        信息:<input type="text" v-bind:value="msg" style="width: 200px">
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"hello world"
            },
            methods:{

            }
        })
    </script>
</body>
</html>

如下图，M修改数据后，V的数据会同步修改，但是V的数据修改后M的数据并不会改变。
在这里插入图片描述

v-model指令

v-model 指令可以实现 M和V 双向的数据传递。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
    <div id="app">
        信息:<input type="text" v-model:value="msg" style="width: 200px">
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"hello world"
            },
            methods:{

            }
        })
    </script>
</body>
</html>

如下图，M修改数据后，V的数据会同步修改，并且V的数据修改后M的数据也会同步改变。
在这里插入图片描述

简易计算器的实现

利用我们学到的v-model指令来实现一个简单的计算器效果。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
    <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">
        <input type="button" value="=" @click="calc">
        <input type="text" v-model="result">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                n1:'',
                n2:'',
                result:'',
                opt: '+'
            },
            methods: {
                calc() {
                    var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
                    //eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
                    this.result = eval(codeStr)
                }
            }
        });
    </script>
</body>
</html>