【Vue3从零开始-第二章】2-9 双向数据绑定指令的使用

2022-09-26 310

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3从零开始-第二章】2-9 双向数据绑定指令的使用

]UWOD(KIB9LJS9~S[T{QHM9.png

前言

在上一篇文章中，详细讲过了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[M]J296M_9A2QVX6(4GVAB.png

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

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

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

<textarea v-model="message" />
复制代码

WTQI8}M6O%RH05EPK1T~9WP.png

在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>
复制代码

{@W3%0}BK4LRAB}P~E~X@C8.png

在使用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>
`
复制代码

@J2@B9L%SX7)5[55B_0]A9T.png

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

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

data() {
  return {
    checked: []
  }
},
复制代码

5}WV904L7W@$Y57M%T}ZOBA.png

注意：在使用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>
复制代码

}(21SR`HIUGS3HC[}V%6FQ6.png

下拉框

<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>
复制代码

J53~P@SW[NWWY%F)27]Z4HX.png

在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>
复制代码

$6W~JMIN)I](C{P_SHWD6S8B.png$

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

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

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

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

7[F@7AG3L]MM9(UCCS[Q20A.png

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

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

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

$7W~L)O3]YJG1GL{AQ5{_Q%A.png$

多选操作时，要将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>
复制代码

Q0Z20`3@TFVD1[{[Q)Y]467.png

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

trim

<input v-model.trim="message" />
复制代码

TLICIDDWZQTDFBAZQM1L%$S.png

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>
复制代码

AC}`MX(TCWAX}Z(H[QGAQDT.png

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

总结

本篇文章讲解了v-model双向数据绑定的相关内容，input、textarea、

checkbox、radio、select标签的使用，还有lazy、trim、number修饰符的使用，大家多练习并巩固一下哦~~

【Vue3从零开始-第二章】2-9 双向数据绑定指令的使用

前言

文本框

多选框

单选框

下拉框

修饰符

lazy

trim

number

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【Vue3从零开始-第二章】2-9 双向数据绑定指令的使用

前言

文本框

多选框

单选框

下拉框

修饰符

lazy

trim

number

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景