Vue中v-model与v-bind数据绑定有何具体差异？

本文共计1922个文字，预计阅读时间需要8分钟。

Vue的模板利用DOM模板，也就是说它的模板可以当作DOM节点运行，在浏览器下不会报错。绑定数据有三种方式，一种是插值表达式，也就是{{name}}的形式；另一种是使用v-bind，即+v-bind；最后一种是v-model。

vue的模板采用DOM模板，也就是说它的模板可以当做DOM节点运行，在浏览器下不报错，绑定数据有三种方式，一种是插值，也就是{{name}}的形式，一种是v-bind，还有一种是v-model。{{name}}的形式比较好理解，就是以文本的形式和实例data中对应的属性进行绑定。比如：

var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data: { name: 'tom', }, method: { toggleName() { this.name = this.name === 'tom' ? 'sony' : 'tom' }, }, })

上面的字符串模板中，有一个{{name}}，它和data.name是绑定的，当data.name发生变化时，视图也发生变化。

但是v-bind和v-model这两种绑定比较难区分，特别是在表单元素中，刚开始会混淆到底应该怎么使用。