Vue 的双向绑定系统采用了开发 Web 应用程序最棘手的部分之一,即用户输入同步,并使它与 v-model 非常简单,v-model 指令更新模板每次模型更改时,更新数据模型每次模板更改时。
双向绑定是一个强大的功能,如果正确使用,可以显著加快开发过程,从而减少保持用户输入与应用程序数据模型一致的复杂性。
在Vue中,使用V模型指令实现双向束缚。
约束文本输入元素
若要将输入元素的值绑定到组件数据的属性,请使用`v-model="dataProperty``。
以下是组件的数据方法:
1data() {
2 return {
3 existentialQuestion: 'Am I truly an alligator?'
4 };
5}
还有寺庙:
1<h2>My deepest, darkest question: {{existentialQuestion}}</h2>
2<input v-model="existentialQuestion"/>
这是一个实时演示: [codepen alligatorio poyLjqY]
注意输入值开始为我是真正的鱼吗?但当您更改输入时,存在性问题属性(和 h2 元素)将实时更新。
连接到检查盒和无线电按钮
检查箱和无线电按钮几乎就像输入元素一样工作. 检查箱绑定要么是真或假,而无线电按钮绑定将无论其价值属性的内容是什么。
此外,一组检查框可以绑定到单个数组中,如果检查,将其值属性的内容放入数组中。
单个检查箱示例
组件数据...
1data() {
2 return {
3 statementIsTrue: true
4 };
5}
...和寺庙
1<p>You have decided this statement is {{statementIsTrue}}</p>
2<label>
3 <input type="checkbox" v-model="statementIsTrue"/>
4 Is this statement true?
5</label>
...并试试直播: [codepen alligatorio abNYvxd]
多个检查盒的例子
组件数据...
1data() {
2 return {
3 namesThatRhyme: []
4 };
5}
...和寺庙
1<p>A list of names that rhyme: {{namesThatRhyme.join(', ')}}</p>
2<label>
3 <input type="checkbox" value="Daniel" v-model="namesThatRhyme"/>
4 Daniel
5</label>
6<label>
7 <input type="checkbox" value="Nathaniel" v-model="namesThatRhyme"/>
8 Nathaniel
9</label>
10<label>
11 <input type="checkbox" value="Hubert" v-model="namesThatRhyme"/>
12 Hubert
13</label>
...和演示: [codepen alligatorio NWNYGZE]
广播按钮示例
组件数据...
1data() {
2 return {
3 howAreYouFeeling: "great"
4 };
5 }
...和寺庙
1<p>How are you feeling today?</p>
2 <label>
3 <input type="radio" value="great" v-model="howAreYouFeeling" />
4 great
5 </label>
6 <label>
7 <input type="radio" value="wonderful" v-model="howAreYouFeeling" />
8 wonderful
9 </label>
10 <label>
11 <input type="radio" value="fantastic" v-model="howAreYouFeeling" />
12 fantastic
13 </label>
14 <p>I am also feeling <em>{{howAreYouFeeling}}</em> today.</p>
这是在一个演示: [codepen alligatorio gOreaVe]
笔记
- 默认情况下,v-model 被评估每次输入事件被启动(即按键或粘贴) 如果您更愿意等到用户完成输入并无焦点,您可以使用 v-model.lazy 修改器来让 v-model 听取更改事件
- 如果您想将用户输入投放到一个数字而不是一个字符串,请添加 v-model.number 修改器。 您将不得不自己处理投放到其他类型
- v-model.trim 修改器将从绑定字符串中切断和引导或追踪 whitespace。 这(显然)不能与 v-model.number
一起使用(虽然 v-model="dataPerty"