Vue数据双向绑定的实现方式讲解

更新时间：2022年08月29日 16:08:35 作者：丘比特惩罚陆

Vue数据双向绑定原理：Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新

前言

在web开发应用中，很多项目都会用到表格一列的组件进行数据的传输、获取和提交，在开发使用中，表格类组件数据的传输，我们一般可以使用v-model将输入的数据同步到data属性中，这个指令可以为不同的输入元素使用不同的属性，这个指令一般在form表单中的input等等元素上面来创建双向的数据绑定。

一、input和textarea

在vue实战项目中，vue里面的data属性可以和input、textarea元素进行数据绑定。简单的解释就是比如input这个事件被触发的时候，value里面的数据就可以将数据听不到Script里面的data数据中；当绑定的data数据发生改变的时候，也会实时的同步到value当中，从而就可以实现双向数据绑定。

我们可以通过代码进行验证，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>数据双向绑定</title>
</head>
<body>
    <div id="app">
<p>姓名：
    <input type="text" v-model="userInfo.xingming">
</p>
<p>邮箱：
    <input type="text" v-model="userInfo.youxiang">
</p>
<p>简历：
    <textarea name="" id="" cols="30" rows="10" v-model="userInfo.jianli"></textarea>
</p>
<p>姓名：{{userInfo.xingming}}</p>
<p>邮箱：{{userInfo.youxiang}}</p>
<p>简历：{{userInfo.jianli}}</p>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                userInfo:{
                    xingming:'',
                    youxiang:'',
                    jianli:"编写你的简历："
                }
            }
        })
    </script>
</body>
</html>

运行结果：

二、radio和CheckBox

在vue实战中，这两个元素也和input和textarea元素一样，都是和data属性一样，选择数据绑定，而且CheckBox就是多选元素，可以选择多个value，可以在data里面使用一个数组进行绑定。只要change事件得到触发，value属性可以同步到data里面；当绑定vue里面的数据改变的时候，就会同步到check里面，从而实现数据的双向绑定。我们还是通过简单的代码实例来看一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>数据双向绑定</title>
</head>
<body>
    <div id="app">
<p>性别：
    <input type="radio" v-model="userinfo.sex" name="sex" value="男">男
    <input type="radio" v-model="userinfo.sex" name="sex" value="女">女
</p>
<p>爱好：
    <input type="checkbox" v-model="userinfo.hobby" value="唱"/>唱
    <input type="checkbox" v-model="userinfo.hobby" value="跳"/>跳
    <input type="checkbox" v-model="userinfo.hobby" value="rap"/>rap
    <input type="checkbox" v-model="userinfo.hobby" value="篮球"/>篮球
</p>
<p>练习生与否：
    <input type="checkbox" v-model="userinfo.lianxisheng" value="练习生">
</p>
<p>性别：{{userinfo.sex}}</p>
<p>爱好：{{userinfo.hobby}}</p>
<p>练习生与否：{{userinfo.lianxisheng}}</p>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                userinfo:{
                    sex:'男',
                    hobby:'【】',
                    lianxisheng:" "
                }
            }
        })
    </script>
</body>
</html>

三、select

select元素也是使用了value属性和vue里面的data属性进行属性绑定，当change事件触发的时候，value的值就会同步到vue里面的数据，当绑定的vue数据改变的时候，也会同步到value，也从而实现数据的双向绑定。代码实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>数据双向绑定</title>
</head>
<body>
    <div id="app">
<p>学历：
<select name="" id="" v-model="xueli">
    <option value="本科">本科</option>
    <option value="硕士">硕士</option>
    <option value="博士">博士</option>
    <option value="博士后">博士后</option>
</select>
</p>
<p>{{xueli}}</p>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
xueli:"本科"
            }
        })
    </script>
</body>
</html>

结果：

四、双向绑定的修饰符

这里介绍几个双向绑定的数据修饰符。

1、lazy

默认情况下， v-model在每次innut事件触发后将输入框的值与数据进行同步;添加lazy后，只有在enter和输入框（失焦点）的时候，数据才能实现同步。

2、number

如果要将用户的输入值自动地转为数字类型，可以给 v-model添加.number修饰但v-model.number 只能输入数字

3、trim

如果要自动地过滤用户输入的首尾空白字符，可以给 v-model添加.trim 修饰符,V-model.trim可以去除前后空格。

我们还还还是通过代码实例来简单的了解一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>数据双向绑定</title>
</head>
<body>
    <div id="app">
<h1>1、数据：{{val1}}</h1>
<input type="text" v-model.lazy="val1">
<h1>2、数据：{{val2}}</h1>
<input type="text" v-model.number="val2">
<h1>3、数据：{{val3}}</h1>
<input type="text" v-model.trim="val3">
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var m = {
    val1:1,
    val2:2,
    val3:''
};
var vm = new Vue({
    el:'#app',
    data:m,
})
    </script>
</body>
</html>

运行结果：

在第一个框输入数据的时候，输入框的值和数据因为没有数据和它进行同步显示，所以当光标移到第二个框的时候，第一个框就会引起失焦，这个时候就可以显示出原本输入的文字，因为lazy只有在enter和失焦的时候，数据才能进行同步；在第二个框每次输入输入一个数值就可以同步显示；第三个先是输入几个空格，然后在输入数值，只有数值才能同步，而输入的空格就会呗忽视掉，因为trim可以去除前后空格。

到此这篇关于Vue数据双向绑定的实现方式讲解的文章就介绍到这了,更多相关Vue数据双向绑定内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue-cli 如何将px转化为rem适配移动端
这篇文章主要介绍了Vue-cli 如何将px转化为rem适配移动端,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-07-07
Vue 过渡实现轮播图效果
本篇文章主要介绍了Vue 过渡实现轮播图效果，Vue 的过渡系统是内置的，在元素从 DOM 中插入或移除时自动应用过渡效果。有需要的小伙伴可以参考下。
2017-03-03
vue实现移动端H5数字键盘组件使用详解
这篇文章主要为大家详细介绍了vue实现移动端H5数字键盘组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
3分钟搞定vite项目(vue/react)使用vite-plugin-pwa配置为pwa应用
这篇文章主要介绍了3分钟搞定vite项目(vue/react)使用vite-plugin-pwa配置为pwa应用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-02-02
vue中tinymce的使用实例详解
TinyMCE Vue是TinyMCE官方发布的Vue组件，可以更轻松地在Vue应用程序中使用TinyMCE，这篇文章主要介绍了vue中tinymce的使用,需要的朋友可以参考下
2022-11-11
Vue父组件监听子组件生命周期
这篇文章主要介绍了Vue父组件监听子组件生命周期,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
5个可以加速开发的VueUse函数库(小结)
VueUse为Vue开发人员提供了大量适用于Vue2和Vue3的基本Composition API 实用程序函数。具有一定的参考价值，感兴趣的可以了解一下
2021-11-11
vue右键菜单的简单封装
这篇文章主要为大家详细介绍了vue右键菜单的简单封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue3中实现使用element-plus调用message
这篇文章主要介绍了vue3中实现使用element-plus调用message，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue vite之LogicFlow安装核心依赖及项目初始化详解
这篇文章主要为大家介绍了vue vite之LogicFlow安装核心依赖及项目初始化详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01