表单和 v-model

Vue 提供了v­-model指令， 用于双向绑定表单类元素上 view 与 view-model 的数据

基础用法

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

单行文本

  <div id="app">
    <input type="text" v-model="msg"><br>
    你输入的是： {{ msg }}
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
  let app = new Vue({
    el: '#app',
    data: {
      msg: ''
    }
  })
  </script>

多行文本

与单行文本类似:

    <textarea name="" id="" cols="30" rows="4"  v-model="msg">
      我是多行文本的初始值
    </textarea>

正如开头提到的，所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的value

image.png

单选按钮

  <div id="app">
    <input type="radio" name="pets" value="cat" v-model="petName">猫猫 <br>
    <input type="radio" name="pets" value="dog" v-model="petName">狗狗   <br>
    现在选中的是： {{petName}}
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        petName: ''
      }
    })
  </script>

复选框

单个复选框

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

 <div id="app">
    v-model: <input type="checkbox" v-model="checked"> {{ checked }} <br> 
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        checked: false
      }
    })
  </script>

多个复选框

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

  <div id="app">
    <input type="checkbox" value="cat" id="cat" v-model="arr"> 
    <label for="cat">cat</label><br>
    <input type="checkbox" value="dog" id="dog" v-model="arr"> 
    <label for="dog">dog</label><br>
    <input type="checkbox" value="bird" id="bird" v-model="arr">
    <label for="bird">bird</label>
    <br> 
    你选中了 ： {{ arr }}
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        arr: []
      }
    })

下拉框

单选下拉框

单选时， 初始化最好绑定到字符串

 <div id="app">
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <!-- vue建议提供一个值为空的禁用选项 -->
      <option value="cat">猫猫</option>
      <option value="dog">狗狗</option>
      <option value="bird">小鸟</option>
    </select>
    <br> 你选中了 ： {{ selected }}
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        selected: '' //初始化最好给定字符串
      }
    })
  </script>

多选下拉框

多选时，绑定一个数组

  <div id="app">
    <select v-model="selected" multiple>
      <option disabled value="">请选择</option>
      <!-- vue建议提供一个值为空的禁用选项 -->
      <option value="cat">猫猫</option>
      <option value="dog">狗狗</option>
      <option value="bird">小鸟</option>
    </select>
    <br> 你选中了 ： {{ selected }}
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        selected: ''
      }
    })
  </script>

值绑定

对于单选按钮，复选框及下拉框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)。
但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

单选按钮

只需要用v-­bind给单个单选框绑定一个value值，此时，v-­model绑定的就是他的value值

  <div id="app">
  <input type="radio" v-bind:value='msg' v-model="pick">单选框<br>
    v-bind: {{ msg }} <br>
    v-model: {{ pick }}
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        msg: 'msg',
        pick: 'pick'
      }
    })
  </script>
//  当选中时  app.msg === app.pick

当选中时 app.msg === app.pick

复选框

true-value 当选中时
false-value 当没有被选中时

  <div id="app">
  <input type="checkbox" 
         v-model="toggle" 
         v-bind:true-value= "value1" 
         v-bind:false-value="value2">点击<br>
    toggle当前的值： {{ toggle}} <br>
    选中: {{ toggle === value1 }} <br>
    未被选中: {{ toggle === value2 }}
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        toggle: 'toggle',
        value1: '我被选中了~',
        value2: '我没有被选中'
      }
    })
  </script>

下拉框

  <div id="app">
   <select v-model="selected" >
     <option  v-bind:value="{a:1}">A</option>
   </select>
   当选中时，selected 的值为： {{selected}}
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        selected: ''
      }
    })
  </script>

修饰符

.lazy

v­-model默认是在input输入时实时同步输入框的数据，而lazy修饰符，可以使其使用 change 事件进行同步（在失去焦点或者敲回车键之后再更新）。
来个 demo 感受一下

.number

自动将用户的输入值转为数值类型

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。

.trim

trim 自动过滤输入过程中首尾输入的空格