记一次Vue中v

由于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选项中声明初始值