Vue.js 2.0 表单控件绑定

基础用法

你可以用 ​v-model​ 指令在表单​ ​、​</code>​ 及 ​<code><select></code>​ 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 ​<code>v-model </code>​本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。</p> <blockquote> <p>​<code>v-model</code>​ 会忽略所有表单元素的 ​<code>value</code>​、​<code>checked</code>​、​<code>selected attribute</code>​ 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 ​<code>data </code>​选项中声明初始值。</p> </blockquote> <p>​<code>v-model</code>​ 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：</p> <ul> <li>text 和 textarea 元素使用 ​<code>value</code>​ property 和 ​<code>input</code>​事件；</li> <li>checkbox 和 radio 使用 ​<code>checked</code>​ property 和 ​<code>change</code>​事件；</li> <li>select 字段将 ​<code>value</code>​ 作为 prop 并将 ​<code>change</code>​ 作为事件。</li> </ul> <blockquote> <p>对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 ​<code>v-model</code>​ 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 ​<code>input </code>​事件。</p> </blockquote> <h3>文本</h3> <h2>实例</h2> <p>  </p> <p>在HTML中</p> <p><div id="app"></p> <p>    <p>文本框内的信息: {{ message }}</p>    </p> <p>    <input v-model="message" placeholder="edit me"></p> <p></div></p> <p>在JavaScript中</p> <p>var app = new Vue({</p> <p>  el: '#app',</p> <p>  data: {</p> <p>    message: ''</p> <p>  }</p> <p>})</p> <p>运行结果：</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/94154480c5e340d587c62c43b00bd9df.gif" target="_blank"><img alt="Vue.js 2.0 表单控件绑定_第1张图片" src="http://img.e-com-net.com/image/info8/94154480c5e340d587c62c43b00bd9df.gif" width="617" height="275" style="border:1px solid black;"></a></p> <p>尝试一下 »</p> <p>多行文本</p> <h2>实例</h2> <p>  </p> <p>在HTML中</p> <p><div id="app"></p> <p>    <span>多行文本框内的信息:</span></p> <p>    <p style="white-space: pre-line;">{{ message }}</p></p> <p>    <br></p> <p>    <textarea v-model="message" placeholder="add multiple lines">

在JavaScript中

var app = new Vue({

  el: '#app',

  data: {

    message: ''

  }

})

运行结果：

尝试一下 »

注意：在文本区域插值( {{text}}) 并不会生效，应用​v-model​ 来代替。

复选框

单个复选框，绑定到布尔值：

{{ checked }}

多个勾选框，绑定到同一个数组：

Jack

John

Mike


Checked names: {{ checkedNames }}

new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

单选按钮

One



Two


Picked: {{ picked }}

One

Two

Picked:

选择列表

单选列表：

实例

  

在HTML中

  

{{ message }}

  

在JavaScript中

var app6 = new Vue({

  el: '#app-6',

  data: {

    message: 'Hello Vue!'

  }

})

运行结果：

尝试一下 »

  A
  B
  C

Selected: {{ selected }}

A  B  C 

Selected:

多选列表（绑定到一个数组）：

实例

  

在HTML中

  

{{ message }}

  

在JavaScript中

var app6 = new Vue({

  el: '#app-6',

  data: {

    message: 'Hello Vue!'

  }

})

运行结果：

尝试一下 »

  A
  B
  C



Selected: {{ selected }}

A B C

Selected: [ "C"]

动态选项，用 v-for 渲染：

实例

  

在HTML中

  

{{ message }}

  

在JavaScript中

var app6 = new Vue({

  el: '#app-6',

  data: {

    message: 'Hello Vue!'

  }

})

运行结果：

尝试一下 »

  
    {{ option.text }}
  

Selected: {{ selected }}

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

       One             Two             Three      

Selected: A

绑定 value

对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：

实例

  

在HTML中

  

{{ message }}