Vue.js表单输入

你可以用 v-model 指令在表单 <input>、<textarea> 及<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

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

复选框

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

<div id="app">
        <input type="checkbox" v-model="name" value="干活">干活
        <input type="checkbox" v-model="name" value="广东省">广东省
        <input type="checkbox" v-model="name" value="史蒂夫">史蒂夫
        <input type="checkbox" v-model="name" value="敢死队">敢死队
        <p><span>选中:{{name}}</span></p>
 </div>

 <script>
       new Vue({
             el:"#app",
              data:{
                  name:[],
                    
            })
        </script>

单选按钮

 <h2>单选按钮</h2>
  <div id="app">
        <input type="radio" v-model="sex" value="男">男
        <input type="radio" v-model="sex" value="女">女
        <p>选中:{{sex}}</p>
</div>

 <script>
       new Vue({
             el:"#app",
              data:{
                 sex:"",
                    
            })
        </script>

选择框

<h2>选择框</h2>
 <div id="app">
        <select v-model="selected">
          <option disabled value="">请选择</option>
          <option>分手</option>
          <option>好风光</option>
          <option>风刀霜剑</option>
          <option>顺风局</option>
        </select>
        <span>选择:{{selected}}</span> 
</div>

 <script>
       new Vue({
             el:"#app",
              data:{
                 selected:"",
                    
            })
        </script>