v-model的使用

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

v-model的基本使用

表单控件在实际开发中时非常常见的。特别是对于用户信息的提交，需要大量的表单。
Vue中使用v-model指令来实现表单元素和数据的双向绑定。
案例解析：
- 当我们在输入框输入内容时
- 因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。
- 当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发怔响应的改变。
- 所以，通过v-model实现了双向绑定。
当然，我们也可以将v-model用于textarea元素。
双向绑定案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-v-model的基本使用</title>
</head>
<body>
  <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>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DyzcE0bo-1609659588992)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记七/1.gif)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uFzXCMf8-1609659588995)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记七/2.gif)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JPYy4Qmj-1609659589000)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记七/3.jpg)]

v-model的原理

v-model其实是一个语法糖，它的背后本质上是包含两个操作：
- v-bind绑定一个value属性。
- v-on指令给当前元素绑定input事件。
也就是说下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02-v-model的原理</title>
</head>
<body>
  <div id="app">
    <!-- <input type="text" v-model="message"> -->
    <input type="text" :value="message" @input="valueChange">
    {
    
    {
    
    message}}
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
    
    
      el: '#app',
      data: {
    
    
        message: '我是阿牛',
      },
      methods: {
    
    
        valueChange(event) {
    
    
          this.message = event.target.value;
        }
      }
    })
  </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aoFI30XM-1609659589029)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记七/4.jpg)]

这样的效果和之前使用v-model是一样的，或者用简短的方式表达：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CE3npyAr-1609659589031)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记七/5.jpg)]

v-model: radio

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-v-model结合radio类型</title>
</head>
<body>
  <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: {
    
    
        sex: '男'
      }
    })
  </script>
</body>
</html>

上述代码我们在data中将set设置为男作为了了默认值。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F4vRhR4k-1609659589032)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记七/6.gif)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Q0sXm6P-1609659589033)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记七/7.gif)]

v-model: checkbox

复选框分为两种情况：单个勾选框和多个勾选框。
单个勾选框：
- v-model即为布尔值。
- 此时input的value并不影响v-model的值。
多个复选框：
- 当是多个复选框，因为可以选中多个，所以对应的data中的属性是一个数组。
- 当选中某一个时，就会将input的value添加到数组中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04-v-model结合checkbox</title>
</head>
<body>
  <div id="app">
    <!-- checkbox单选框 -->
    <label for="agree">
      <input type="checkbox" id="agree" v-model="isAgree">同意
    </label>
    <h2>您的选择是：{
    
    {
    
    isAgree}}</h2>
    <button :disabled="!isAgree">下一步</button>

    <br>

    <!-- 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>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
    
    
      el: '#app',
      data: {
    
    
        isAgree: false,
        hobbies: []
      }
    })
  </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AdCXmV2d-1609659589034)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记七/8.gif)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aofsyY2y-1609659589037)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记七/9.gif)]

v-model: select

和checkbox一样，select也分单选和多选两种情况
单选：只能选中一个值。
- v-model绑定的是一个值。
- 当我们选中option中的一个时，会将它对应的value赋值到mySelect中。
多选：可以选中多个值。
- v-model绑定的是一个数组。
- 当选中多个值时，就会将选中的option对应的value添加到数组mySelect中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05-v-model结合select类型</title>
</head>
<body>
  <div id="app">
    <!-- 选择一个 -->
    <select name="abc" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="榴莲">榴莲</option>
      <option value="草莓">草莓</option>
      <option value="樱桃">樱桃</option>
    </select>
    <h2>您的选择是{
    
    {
    
    fruit}}</h2>
    <br>

    <!-- 选择多个 -->
    <select name="abc" v-model="fruits" multiple>
      <option value="苹果">苹果</option>
      <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: {
    
    
        fruit: '草莓',
        fruits: []
      }
    })
  </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vv3WMGVu-1609659589042)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记七/10.gif)]

值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但是有时我们可能想把值绑定到 Vue 实例的一个动态 property 上，这时可以用 v-bind 实现，并且这个 property 的值可以不是字符串。

复选框

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>
// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'

这里的 true-value 和 false-value attribute 并不会影响输入控件的 value attribute，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(即“yes”或“no”)，请换用单选按钮。

单选按钮

<input type="radio" v-model="pick" v-bind:value="a">

// 当选中时
vm.pick === vm.a

选择框的选项

<select v-model="selected">
    <!-- 内联对象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

通俗介绍

以上介绍是Vue官方的，十分疑惑，但是仔细阅读之后发现很简单，就是动态的给value赋值而已：
- 我们在前面的value中的值，可以回头看一下，都是定义在input的时候给定的。
- 但是在真实开发中，这些input的值可能是从网络获取或定义在data中的。
- 所以我们可以通过v-bind: value给value绑定值。
- 将我们上面checkbox的案例稍作修改：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>06-v-model值绑定</title>
</head>
<body>
  <div id="app">
    <label v-for="item in originHobbies" :for="item">
      <input type="checkbox" :id="item" :value="item" v-model="hobbies">{
    
    {
    
    item}}
    </label>
    <h2>您的爱好是:{
    
    {
    
    hobbies}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
    
    
      el: '#app',
      data: {
    
    
        isAgree: false,
        hobbies: [],
        originHobbies: ['篮球', '说唱', '街舞', '台球', 'freestyle']
      }
    })
  </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-22SocHNX-1609659589044)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记七/11.gif)]

修饰符

lazy修饰符：
- 默认情况下，v-model默认是在input事件中同步输入框到的数据的。
- 也就是说，一旦有数据发生改变，对应的data中的数据就会自动发生改变。
- lazy修饰符可以让数据在失去焦点或者回车时才会更新。
number修饰符：
- 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
- 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
- number修饰符可以让在输入框中输入的内容自动转成数字类型。
trim修饰符：
- 如果输入的内容首尾有很多空格，通常我们希望将其去除。
- trim修饰符可以过滤内容左右两边的空格。

回顾

Vue笔记一——Vue安装与体验
 Vue笔记二——Vue声明周期与模板语法
 Vue笔记三——计算属性(computed)
Vue笔记四——事件监听的使用
 Vue笔记五——条件判断与循环遍历
 Vue笔记六——书籍购物车案例

Vue笔记七——v-model表单输入绑定详细介绍