Vue.js 学习笔记 六 v-model 双向绑定数据

之前说的v-bind指令，可以绑定数据，但是是单向的，从model向view绑定，下面介绍v-model,可以双向绑定数据

 <div id="divApp">
        <p>{{msg}}</p><br/>
        <!--v-model实现数据双向绑定,只能运用在表单元素中-->
        <input type="text" v-model="msg" />
    </div>
    <script>
        var v = new Vue({
            el: '#divApp',
            data: {
                msg: '今天是几月几号啊！！！',
            },
            methods: {
            }
        })
    </script>

页面初始化加载时，p标签和text文本框的内容都是msg的内容，当我们修改文本框内容时，发现p标签中的内容也跟着变化了，即view的数据被更新到了model，这就是双向绑定。

这个经常会用到。

 

稍微复杂一点点的，写个四则运算吧

<div id="divCalc">
        <input type="text" width="100px" v-model="fNum" />
        <select v-model="calc" >
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" width="100px" v-model="sNum" />
        =
        <input type="text" width="100px" v-model="result" /><br />
        <input type="button" value="计算" v-on:click="getResult" />
    </div>

JS

var v = new Vue({
            el: '#divCalc',
            data: {
                fNum: 0,
                sNum: 0,
                result: 0,
                calc: '+'
            },
            methods: {
                getResult() {
                    switch (this.calc) {
                        case '+':
                            this.result = parseInt(this.fNum) + parseInt(this.sNum);
                            break;
                        case '-':
                            this.result = parseInt(this.fNum) - parseInt(this.sNum);
                            break;
                        case '*':
                            this.result = parseInt(this.fNum) * parseInt(this.sNum);
                            break;
                        case '/':
                            this.result = parseInt(this.fNum) / parseInt(this.sNum);
                            break;
                        default:
                            this.result = 0;
                            break;
                    }
                }
            }
        })

这个例子应该更直观，我在文本框，下拉框上都加上了v-model指令，让它们与model的数据双向绑定，文本框和下拉框的值能在vm中拿到，点击计算后，只是修改了model的属性，并不需要去重新为结果文本框赋值，这就是双向绑定的好处，减少了对DOM元素的操作，主要精力都集中在逻辑上。

上一篇

Vue.js 学习笔记 五 常用的事件修饰符

转载于:https://www.cnblogs.com/luyShare/p/11535319.html