一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。

前言

在上一篇文章中，详细讲过了vue的事件绑定渲染，今天我们继续深入了解一下vue的双向数据绑定。大家在之前的例子中也有用过，下面我们就详细的讲解一下。

文本框

在第一章中，我们在input标签中绑定过v-model指令用来进行双向数据绑定的输出，下面先来回顾一下。

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello World'
      }
    },
    template: `
            <div>
                {{message}}
                <input v-model="message" />
            </div>
        `
  });
  const vm = app.mount('#root');

</script>

当我们绑定v-model指令之后，无论是在浏览器控制台修改数据值，还是直接在input输入框中修改值，都会重新渲染message，这样我们就实现了一个双向数据绑定功能。

上面说的这是input这种表单中的单标签闭合类型的，那么在表单中还有一种textarea这种双标签闭合类型的文本框，在表单中，我们通常都是这样去写的： <textarea>hello</textarea>

textarea文本框在vue中也可以作为一个单标签闭合类型去写，和input一样用v-model指令绑定数据值。

<textarea v-model="message" />

• 在vue里面无论是input文本框还是textarea文本框，都是通过单标签闭合类型然后绑定v-model指令去实现双向数据绑定。

• 如果用input文本框做了双向数据绑定操作之后，就不用在input标签上写value属性了。v-model指令已经替代了这种value属性。

多选框

在文本框中，我们使用v-model指令可以修改input和textarea标签的值。但是在checkbox多选框中使用true和false来表示多选框是否勾选上的。

所以我们就不能用字符串形式的数据值了，就得将data里面的数据值改为布尔类型的。

<script>
  const app = Vue.createApp({
    data() {
      return {
        checked: false
      }
    },
    template: `
            <div>
                {{checked}}
                <input type="checkbox" v-model="checked" />
            </div>
        `
  });
  const vm = app.mount('#root');

</script>

在使用checkbox标签时，我们并不是单个使用的，而是有一组checkbox标签，下面我们就来看看有一组这样的标签时该如何进行双向绑定。

template: `
    <div>
        {{checked}}
        jack <input type="checkbox" v-model="checked" value="jack" />
        dell <input type="checkbox" v-model="checked" value="dell" />
        lee <input type="checkbox" v-model="checked" value="lee" />
    </div>
`

• 当我们点击任意一个checkbox标签时，其他的也会跟着一起改变，这并不是我们要的效果，我们希望当我勾选了jack之后，前面显示jack，勾选啥就显示啥。

• 这时候我们只需要对checked数据值做修改就可以实现想要的功能了。

data() {
  return {
    checked: []
  }
},

注意：在使用checkbox标签组时，我们要在input标签上除了使用v-model指令之外，还要加上value属性，否则checked中会不知道添加什么值到数组里面。

单选框

单选框其实和多选框差不多，唯一的区别就是多选框的数据是一个数组，而单选框的数据是一个字符串，选啥就去更新字符串数据值。

<script>
  const app = Vue.createApp({
    data() {
      return {
        radioStr: ''
      }
    },
    template: `
            <div>
                {{radioStr}}
                jack <input type="radio" v-model="radioStr" value="jack" />
                dell <input type="radio" v-model="radioStr" value="dell" />
                lee <input type="radio" v-model="radioStr" value="lee" />
            </div>
        `
  });
  const vm = app.mount('#root');

</script>

下拉框

<select>
    <option>A</option>    
    <option>B</option>    
    <option>C</option>    
</select>

当我们写一个select下拉框的时候，是有这种多个DOM标签组合的，那在双向数据绑定的时候，应该绑定在哪里呢？

<script>
  const app = Vue.createApp({
    data() {
      return {
        selected: '张三'
      }
    },
    template: `
            <div>
                {{selected}}
                <select v-model="selected">
                    <option>张三</option>    
                    <option>李四</option>    
                    <option>王五</option>    
                </select>
            </div>
        `
  });
  const vm = app.mount('#root');

</script>

• 在select标签上绑定v-model指令，就可以获取到下拉选项值了，其实这时候是在option标签中，省略了value属性的，默认应该是需要加上value属性值。

<select v-model="selected">
    <option value="张三">张三</option>    
    <option value="李四">李四</option>    
    <option value="王五">王五</option>    
</select>

上面看到的是固定下拉框数据的双向绑定使用，在实际项目中，我们的下拉框选项中的数据是一个动态的，更多都是通过后端API返回的数据。

下面我们就来改造一下，顺便在回顾一个之前的指令v-for

<script>
  const app = Vue.createApp({
    data() {
      return {
        selected: '王五',
        options: [
            {text: '张三', value: '张三'},
            {text: '李四', value: '李四'},
            {text: '王五', value: '王五'}
        ]
      }
    },
    template: `
            <div>
                {{selected}}
                <select v-model="selected">
                    <option v-for="item in options" :value="item.value">{{item.text}}</option> 
                </select>
            </div>
        `
  });
  const vm = app.mount('#root');
</script>

• 通过v-for指令循环出options中的数据值，显示的内容是循环数据中的text属性，然后再给option标签中的value属性进行v-bind指令绑定到循环数据中的value属性的值。

• :value相当于v-bind:value，此处是简写，在之前的内容中有介绍。

这样做了循环之后，其实在循环数据中的value还有个神奇的用法。

options: [
    {text: '张三', value: {val: '张三'}},
    {text: '李四', value: {val: '李四'}},
    {text: '王五', value: {val: '王五'}}
]

此时我们会发现当你勾选张三之后，前面输出的是value里面的对象，这就是显示和数据分割的一种用法，显示和数据都可以通过自定义，并不需要一致的。

在select标签中，还有一个属性multiple用来表示下拉框中的多选操作。

<select v-model="selected" multiple>
    <option v-for="item in options" :value="item.value">{{item.text}}</option>    
</select>

• 多选操作时，要将v-model中的selected改为数组类型哦~

修饰符

之前的文章中，我们也一起学过部分修饰符的内容，其实在双向数据绑定时，也有一个修饰符可以对数据做一些操作。

• 下面用到的修饰符都是在v-model指令上使用的。

lazy

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'hello'
      }
    },
    template: `
            <div>
                {{message}}
                <input v-model.lazy="message" />
            </div>
        `
  });
  const vm = app.mount('#root');
</script>

lazy：懒加载修饰符，当我们在文本框中输入值之后，会在鼠标点击外部区域时才显示出来，相比直接绑定数据会有一个延迟，也就是在文本框失去焦点之后才会显示具体的数据值。

trim

<input v-model.trim="message" />

trim：去除绑定数据中的前后空格，当我们在文本框数据前后输入空格时，在DOM中会同时渲染出空格，为了防止这种情况，可以使用trim修饰符去除前后空格，需要注意的是，数据中间的空格是没办法去除的。

number

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: '123'
      }
    },
    template: `
            <div>
                {{typeof message}}
                <input v-model.number="message" type="number" />
            </div>
        `
  });
  const vm = app.mount('#root');
</script>

number：将字符串类型转换为数字类型，当我们在data中定义的数据是字符串时，但是文本框需要的是数字类型时，可以通过number属性进行转换，需要注意的是，只能输入数字转换，所以需要将input标签中的type设为number。

总结

本篇文章讲解了v-model双向数据绑定的相关内容，input、textarea、checkbox、radio、select标签的使用，还有lazy、trim、number修饰符的使用，大家多练习并巩固一下哦~~