之前说的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元素的操作,主要精力都集中在逻辑上。
上一篇