记一次Vue中v-model和v-bind区别

由于v-model 只是语法糖， <input v-model="message"> 与下面的两行代码是一致的：

<input v-bind:value="message" v-on:input="message = $event.target.value" />
<input :value="message" @input="message = $event.target.value" />

<p v-bind:class="someclass"></p>
如果不加 v-bind 那么 someclass 就是个常量，没有任何动态数据参与。当加上 v-bind 之后，它的值 someclass 不是字符串，而是vue实例对应的 data.someclass 这个变量。

做一个实验：

在data对象中创建两个变量：name,value

<input :value="name" v-model="body">

显示两个变量值：

<h1>{{name}}---{{body}}</h1>

结果：

1、修改input输入框中的值，body随着输入框的值变化，name不变

　  修改name的值，输入框和body都不变

2、将v-model=“body”去掉，即<input :value="name" >

　  修改input输入框中的值，name不变

      修改name的值，输入框也随之变化

3、给name和body都赋初始值，即name:"name",body:"body"

　   当<input :value="name" v-model="body">，输入框初始值为body

　　当i<input :value="name" >，输入框初始值为name

总结：

当v-model会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的data选项中声明初始值

 

转载于:https://www.cnblogs.com/hrrsdtc/p/10688397.html