p9_v-model简易计算器

总结:

双向绑定需要的是V=>M=>V层的数据改变,所以凡是页面改变数据的都需要v-model

代码-style

    <style>
        [v-cloak] {
            display: none;
        }
    </style>

dom结构

<div id="app">
        <h3 v-cloak>{{ msg }}</h3>

        <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="clcu">
        <input type="text" v-model="result">

    </div>

js

  <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: '',
                n1: '0',
                n2: '0',
                result: '0',
                opt: '*'

            },
            methods: {
                clcu: function() {
                    switch (this.opt) {
                        case '+':
                            this.result = parseInt(this.n1) + parseInt(this.n2)
                            break;
                        case '-':
                            this.result = parseInt(this.n1) - parseInt(this.n2)
                            break;
                        case '*':
                            this.result = parseInt(this.n1) * parseInt(this.n2)
                            break;
                        case '/':
                            this.result = parseInt(this.n1) / parseInt(this.n2)
                            break;
                    }
                }
            }
        })
    </script>

简化代码:

image.png

switch全部删掉,可以改用这个eval解析字符串然后执行,我们可以拼接这两个

v-model拿到数据应交给M==>data

image.png
无论我的n也好还是opt也好统一给data
image.png
data里显示可能是我们第一次显示的内容,不过我们可以通过页面的改变而改变M层这样就不需要关心DOM如何获取如何设置等等