表单输入绑定

基础用法:

用 v-model 指令在表单 < input> 及 < textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。

它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理

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

1. 文本

v-model

<div id="app">
       
        <input v-model="message" placeholder="请输入你的姓名字" type="text"></input>
        你的姓名字:{{message}}
      </div>
      <script>
          var vm = new Vue({
                el:"#app",
                data:{
                    message:""
                },
             });
 </script>

效果：在input里输入内容，下面请输入你的姓名字实时动态更新

v-show

<input type="text" v-model="age">
  <span v-show="age">你的年龄：{{age}}</span>

<script>
       var vm = new Vue({
              el:"#app",
               data:{
                    age:""
                },
             });
 </script>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

注意，v-show 不支持 <template> 元素，也不支持 v-else

2.多行文本

 <textarea v-model="message" placehoder="edit me"></textarea>
      <!-- white-space: nowrap,规定段落中的文本不进行换行 -->
  <p style="white-space: nowrap">Message：{{message}}</p>

var vm = new Vue({
            el:"#app",
            data:{
                message:""
            },
        });

效果：在textarea里输入内容，下面Message实时动态更新

注意：在文本区域插值 (<textarea></textarea>) 并不会生效，应用 v-model 来代替。

3.选择框

<div id="app">
  <select v-model="myseleted">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <p>{{myseleted}}</p>
</div>

var vm = new Vue({
  el:"#app",
  data:{
    myseleted:""
  },
});

注意：

如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

效果图：

4.单选按钮

<div id="app">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

效果图：

总结：

不管哪种表单组件都是将value或者表单组件的值通过v-model向JS传递和逆向的过程，但是注意对于复选框，它的值也可以是布尔值。