Vue 表单绑定 v-model

表单绑定

• 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单
• Vue中使用v-model指令来实现表单元素和数据的双向绑定

<div id="app">
  <input type="text" v-model="message">
  {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

• 案例解析
  1. 当我们在输入框输入内容时
  2. input中的v-model绑定了message,所以会实时将输入的内容传递给message,message发生改变
  3. 当message发生改变时，因为上面我们使用了插值语法，将message的值插入了DOM中，所以DOM也发生相应的改变
  4. 最后，通过了v-model实现了双向绑定

v-model的原理

• v-model其实是一个语法糖，它的本质时包含了两个操作：

  1. v-bind绑定一个value指令
  2. v-on指令给当前元素绑定input事件

• 示例代码

<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

• input有一个input事件，用来动态的监听用户的输入
• 当然，我们也可以将v-model用于texterea元素

<!-- 2. 绑定textarea元素 -->
<textarea v-model="message"></textarea>
<p>输入的内容: {{message}}</p>

v-model: radio(单选框)

<div id="app">
  <label for="male">
    <input type="radio" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" value="女" v-model="sex">女
  </label>
  <h2>您选择的性别是: {{sex}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      sex: '女'
    }
  })
</script>

• 单选框中，当v-model绑定的是同一个变量，同样可以产生互斥，省略name属性
• 图中sex可以当作单选框的默认值

v-model: checkbox(复选框)

• 复选框分为两种情况：单个多选框和多个勾选框

<div id="app">
  <!--1.checkbox单选框-->
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
  </label>-->
  <h2>您选择的是: {{isAgree}}</h2>-->
  <button :disabled="!isAgree">下一步</button>

  <!--2.checkbox多选框-->
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>您的爱好是: {{hobbies}}</h2>

  <label v-for="item in originHobbies" :for="item">
    <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
  </label>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isAgree: false, // 单选框
      hobbies: [], // 多选框,
      originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
    }
  })
</script>

• label可以使整个选项都可以被点击选中
• 单个勾选框：
  • v-model即为布尔值。
  • 此时input的value并不影响v-model的值。
• 多个复选框：
  • 当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
  • 当选中某一个时，就会将input的value添加到数组中。

v-model：select

• 和checkbox一样，select也分单选和多选两种情况

<div id="app">
  <!--1.选择一个-->
  <select name="abc" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是: {{fruit}}</h2>

  <!--2.选择多个-->
  <select name="abc" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是: {{fruits}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      fruit: '香蕉',
      fruits: []
    }
  })
</script>

• 单选：只能选中一个值。

  • v-model绑定的是一个值。
    -当我们选中option中的一个时，会将它对应的value赋值到mySelect中

• 多选：可以选中多个值。

  • v-model绑定的是一个数组。
  • 当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

  修饰符

 <div id="app">
 <!--1.修饰符: lazy-->
 <input type="text" v-model.lazy="message">
 <h2>{{message}}</h2>

 <!--2.修饰符: number-->
 <input type="number" v-model.number="age">
 <h2>{{age}}-{{typeof age}}</h2>

 <!--3.修饰符: trim-->
 <input type="text" v-model.trim="name">
 <h2>您输入的名字:{{name}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
 const app = new Vue({
   el: '#app',
   data: {
     message: '你好啊',
     age: 0,
     name: ''
   }
 })

 var age = 0
 age = '1111'
 age = '222'
</script>

• lazy修饰符：

  • 默认情况下，v-model默认是在input事件中同步输入框的数据的。
  • 也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变,这样的操作过于频繁浪费性能
  • lazy修饰符可以让数据在失去焦点或者回车时才会更新

• number修饰符：

  • 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
  • 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
  • number修饰符可以让在输入框中输入的内容自动转成数字类型

• trim修饰符：

  • 如果输入的内容首尾有很多空格，通常我们希望将其去除
  • trim修饰符可以过滤内容左右两边的空格