Vue中v-model和v-bind绑定数据有什么本质区别和具体应用场景？

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

Vue的模板使用DOM模板，也就是说，它的模板可以当作DOM节点来执行，在浏览器下不会报错。绑定数据有三种方式：一种是通过插值表达式`{{name}}`，另一种是使用`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这两种绑定比较难区分，特别是在表单元素中，刚开始会混淆到底应该怎么使用。