vue双向绑定实例应用记录

最新推荐文章于 2024-06-25 00:43:15 发布
最新推荐文章于 2024-06-25 00:43:15 发布
阅读量952 收藏 3
点赞数
分类专栏： web前端开发 vue 文章标签： vue 双向绑定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwpoor123/article/details/84643064
版权

vue双向绑定一般是用在向数据库写数据，或修改数据的时候，使用vue的数据双向绑定可以大大简化前端代码量，让页面看起来更加简洁，更容易维护。下面就用实际开发中的一个实例来讲解一下vue的双向绑定：

实例是新增一个保险方案，其中包含一个客户信息和多个被保险人信息，被保险人信息要实现动态的 增 、删、 改，这样看来使用vue的动态双向绑定是最合适不过的了。

其中html代码如下：

<div class="formwrapper" style="padding-top: 0">
            <p class="midtitle">方案信息</p>
            <div class="formbox nomarginbot">
                <dl>
                    <dt>方案名称</dt>
                    <dd><input type="text" placeholder="方案名称" v-model="proname" id="ProgramName"></dd>
                </dl>
            </div>
            <p class="midtitle">客户信息</p>
            <div class="formbox nomarginbot">
                <dl>
                    <dt>客户称呼</dt>
                    <dd><input type="text" placeholder="请输入客户称呼" v-model="customername" id="Name"></dd>
                </dl>
                <dl>
                    <dt>出生日期</dt>
                    <dd><input type="date" placeholder="请选择出生日期" v-model="customerbirthday" id="Birthday"></dd>
                </dl>
                <dl>
                    <dt>性别</dt>
                    <dd>
                        <select name="Sex" id="Sex" v-model="customersex" class="{c999: customersex==-1}">
                            <option value="-1" disabled style="display: none;">请选择性别</option>
                            <option value="0">男</option>
                            <option value="1">女</option>
                        </select>
                    </dd>
                </dl>
            </div>
            <p class="midtitle">被保险人信息</p>
            <div class="insuredinfo" v-for="(item,index) in insuredinfo">
                <div class="formbox nomarginbot">
                    <dl v-if="item.relationship != 7">
                        <dt>是客户的</dt>
                        <dd>
                            <select name="relationship" id="relationship" value="-1" v-model="item.relationship" class="{c999: item.relationship==-1}">
                                <option value="-1" disabled style="display: none;">请选择与客户关系</option>
                                <option value="0">自己</option>
                                <option value="1">丈夫</option>
                                <option value="2">妻子</option>
                                <option value="3">父亲</option>
                                <option value="4">母亲</option>
                                <option value="5">儿子</option>
                                <option value="6">女儿</option>
                                <option value="7">自定义称呼</option>
                            </select>
                        </dd>
                    </dl>
                    <dl v-if="item.relationship == 7">
                        <dt>被保险人称呼</dt>
                        <dd><input type="text" placeholder="请输入被保险人称呼" v-model="item.name" id="InsuredName"></dd>
                    </dl>
                    <dl v-if="item.relationship != -1 && item.relationship != 0">
                        <dt>出生日期</dt>
                        <dd><input type="date" placeholder="请选择出生日期" v-model="item.birthday" id="InsuredBirth"></dd>
                    </dl>
                    <dl v-if="item.relationship == 7">
                        <dt>性别</dt>
                        <dd>
                            <select name="InsuredSex" id="InsuredSex" v-model="item.sex" class="{c999: item.sex==-1}">
                                <option value="-1" disabled style="display: none;">请选择性别</option>
                                <option value="0">男</option>
                                <option value="1">女</option>
                            </select>
                        </dd>
                    </dl>
                </div>
                <p v-if="index != 0" class="deleteinsbtn" v-on:click="deleteinsured(index)"><span>删除被保险人</span></p>
            </div>
            <div class="addinsured" v-on:click="addinsured">
                <i class="iconfont icon-tianjiabeibaoxianren"></i>新增被保险人
            </div>
        </div>
        <div class="blockbtnwrap">
            <a href="javascript:;" onclick="addProgram()" class="btn btn-block btn-org">确定</a>
        </div>

js代码如下：

<script type="text/javascript">

        var fadata = new Vue({
            el: "#fainfo",
            data: {
                proname: '',
                customername: '',
                customerbirthday: '',
                customersex: '-1',
                insuredinfo: [{
                    relationship: -1,
                    birthday: '',
                    name: '',
                    sex: -1,
                }]

            },
            methods: {
                deleteinsured: function (index) {
                    this.insuredinfo.splice(index, 1);
                    
                },
                addinsured: function () {
                    var obj = {
                        relationship: -1,
                        birthday: '',
                        name: '',
                        sex: -1
                    };
                    this.insuredinfo.push(obj);

                }
            }
        })

        function addProgram() {
            var ProgramName = $('#ProgramName').val().trim();
            if (ProgramName == "") {
                layer.msg("方案名称不能为空");
                return;
            }
            var Name = $('#Name').val().trim();
            if (Name == "") {
                layer.msg("客户称呼不能为空");
                return;
            }
            var Birthday = $('#Birthday').val().trim();
            if (Birthday == "") {
                layer.msg("请选择出生日期");
                return;
            }
            var Sex = $('#Sex').val();
            if (Sex == null || Sex == "-1") {
                layer.msg("请选择性别");
                return;
            }

            $('.insuredinfo').each(function (i) {
                var that = this;

                var relationship = $(that).find('#relationship').val();
                var InsuredName = $(that).find('#InsuredName').val();
                var InsuredBirth = $(that).find('#InsuredBirth').val();
                var InsuredSex = $(that).find('#InsuredSex').val();
                if (relationship === null || relationship == "-1") {
                    layer.msg("请选择客户关系");
                    return;
                } else if (relationship == "7" || relationship == undefined) {
                    if (InsuredName == "") {
                        layer.msg("请输入被保险人称呼");
                        return;
                    }
                    if (InsuredBirth == "") {
                        layer.msg("请选择被保人出生日期");
                        return;
                    }
                    if (InsuredSex == null || InsuredSex == "-1") {
                        layer.msg("请选择被保人性别");
                        return;
                    }
                } else if (relationship != "0") {
                    if (InsuredBirth == "") {
                        layer.msg("请选择被保人出生日期");
                        return;
                    }
                }

            })

            var insuredinfo = JSON.stringify(fadata.insuredinfo)
            $.ajax({
                url: '/HKBProgram/AddProgramList',
                beforeSend: function () {
                    var index = layer.load(1, {
                        shade: [0.1, '#000'] //0.1透明度的白色背景
                    });
                },
                data: {
                    ProgramName: ProgramName,
                    Name: Name,
                    Birthday: Birthday,
                    Sex: parseInt(Sex),
                    InsuredInfo: fadata.insuredinfo,
                },
                cache: false,
                type: 'Post',
                dataType: 'json',
                success: function (response) {
                    layer.closeAll();
                    if (response == "1") {
                        layer.msg('添加成功！');
                    } else {
                        layer.msg('添加失败！');
                    }
                },
                error: function () {
                    layer.closeAll();
                    layer.msg('系统异常');
                }
            });

        }


    </script>

代码很简单，vue初始化，默认数据data，新增被保险人的时候只需要向insuredinfo数组新增一个对象：

var obj = {
                        relationship: -1,
                        birthday: '',
                        name: '',
                        sex: -1
                    };
                    this.insuredinfo.push(obj);

删除一个被保险人信息只需要删除insuredinfo数组的当前的对象：

deleteinsured: function (index) {
                    this.insuredinfo.splice(index, 1);                
                },

html代码会自动更新。

当信息输入完成点击确认存入数据库的时候，只需要获取vue里面的data数据就可以了，因为是双向绑定，data里面的数据就是input输入框对应的值，这样一来就免去单独获取每个input输入框的值。

 

我们也可以在浏览器下查看是否是双向绑定：

可以看到，当只有一个被保险人信息的时候insuredinfo数组也只对应当前一个对象

当新增一个被保险人信息以后，insuredinfo数组也对应新增了一个对象

同样，删除一个被保险人信息，insuredinfo数组也会同事删除当前对象

YuanlongWang
关注
专栏目录
Vue 3.0双向绑定原理的实现方法
10-16
Vue.js作为前端开发中广泛应用的JavaScript框架，其核心功能之一便是实现了数据的双向绑定。Vue3.0相较于Vue2.0在双向绑定的数据劫持方式上做了改进，使用了Proxy代理代替了Object.defineProperty来实现数据响应式...
vue的双向绑定的应用 与案例
weixin_48864616的博客
12-30 1300
v-model：实现双向绑定，常用于表单元素。 如果要让多个单选框成为一组，必须保证 v-model的值必须相等。 当data中的数据发送变化时，对应的单选框就会被选中 选中单选框的时候，data中的数据也会跟着变化，变成单选框中value的属性值。 实例:单选框 <div id="app"> 选择一个你喜欢的明星：<br> <!-- input后面的文字 只是对input元素的解释说明，是给用户看到。 input的值由它的value属性来
v-model的双向数据绑定实现原理（附：案例和项目实例）
热门推荐
您的博客
03-11 1万+
一. 前言。 相信对使用vue框架的童靴来说，v-model的使用都能信手沾来，熟悉的不能再熟悉，也都知道v-model其实是个语法糖。不过其究竟是怎么实现的双向数据绑定，很大一部分童靴还是心存疑虑。本文就根据最简单的案例和基于实际项目中最常用的实例来从两个角度讲解v-model的前世今生。 二. v-model的前世今生。 目前的几大主流MVC(VM)框架都实现了单向数据绑定。简而言之，vue中的v-model无非就是在单向数据绑定的基础上给对应表单元素（input、select等）添加了(in
3分钟带你搞懂Vue双向绑定原理及问题剖析
最新发布
2401_85111824的博客
06-25 130
【代码】3分钟带你搞懂Vue双向绑定原理及问题剖析。
v-model双向数据绑定小案例 (工作中经常用到)
老段的CSDN的博客
10-30 467
表单提交是开发中非常常见的功能，也是和用户交互的重要手段：比如用户在登录、注册时需要提交账号密码；这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成。v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。是Vue框架的一种内置的API指令。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
vue数据双向绑定案例
kerryqpw的博客
04-11 995
vue数据双向绑定案例 vue是通过MVVM实现数据的双向绑定，通过DOM Listeners监听view,Data Bindings监听model，实现数据的双向绑定的。 实现效果： 实现代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title...
vue 双向绑定示例
qq_43720804的博客
08-19 342
vue 双向绑定示例
Vue数据双向绑定原理实例解析
10-15
Vue.js 的数据双向绑定是其核心特性之一，它使得 View 层与 Model 层可以实时同步，极大地简化了前端开发流程。这一特性是基于 MVVM（Model-View-ViewModel）设计模式实现的，与传统的 MVC（Model-View-Controller）...
Vue.js单向绑定和双向绑定实例分析
10-18
双向绑定的实现基于属性访问器，Vue创建了一个观察者，监视`v-model`绑定的值，并在该值改变时更新对应的DOM元素，同时在用户修改表单元素时更新数据模型。 例如，下面的代码展示了`v-model`如何在文本输入框和`...
vue 属性拦截实现双向绑定的实例代码
10-17
Vue.js 的属性拦截和双向绑定机制极大地简化了前端应用的数据管理。`Object.defineProperty()` 负责监听和处理数据变化，而 `v-bind` 和 `v-model` 指令则为开发者提供了方便的数据绑定语法。这些特性使得Vue能够在...
详解Vue源码学习之双向绑定
10-17
在Vue框架中，双向绑定是一项核心特性，它使得数据模型与视图之间的交互变得极其便捷。Vue是如何实现这一功能的呢？我们通过源码学习来深入理解。 首先，当一个Vue实例被创建时，它的`data`选项会被处理。Vue会遍历...
vue双向数据绑定原理和示列
m0_50553098的博客
09-25 194
当输入框的值发生变化时，就会更新 Vue 实例中对应的属性的值；反之，当 Vue 实例中对应的属性的值发生变化时，输入框的值也会被更新。方法被触发时，Vue 会检查该属性是否被监听，如果有监听，则会通知所有的监听器，将更新后的值同步到所有监听器中对应的视图上。属性的值被改变时，输入框的值也会随之改变。当视图被更新后，会触发实际的 DOM 操作，将最新的值渲染到输入框中。指令被解析时，会将输入框的值绑定到 Vue 实例中的一个属性上。属性，可以看到，当输入框的值发生变化时，当输入框的值发生变化时，会触发。
Vue 双向数据绑定基础到实战
weixin_43749805的博客
06-14 769
除了在原生的输入控件上应用双向数据绑定外，Vue 还允许在自定义组件中使用双向数据绑定。要在自定义组件中实现双向绑定，需要使用v-model指令，并在组件中定义value属性和input事件。return {
vue-数据的双向绑定
weixin_59202218的博客
05-28 704
概述：Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.<input type="checkbox" v-model="agree">同意<br>用户名: <input type="text" v-model="username"/>//该属性值和文本框的value属性值一样。（多个把data里面的变成数组就行）三、form表单同理。
【Vue】实现Vue中的双向数据绑定
weixin_63559644的博客
04-12 1391
Vue是通过数据劫持的方式来做数据绑定的，核心方法：Object.defineProperty()， 实现三部分：observer， watcher和compiler——指令解析器Compile，对每个元素节点的指令进行解析，根据指令模板替换数据，以及绑定相应的更新函数；数据监听器observer对所有vm属性进行监听，如有变动通知订阅者watcher；watcher收到更新通知后，执行相应回调函数以更新视图。
记录vue的双向绑定原理及实现
snail767的博客
02-06 1715
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
Vue 双向绑定小案例
weixin_45743799的博客
11-16 295
用Vue实现双向绑定的小案例。 **双向绑定：**使用了双向绑定的两个内容一定是完全一样，同时变化（同增同减） 效果图 原始样式 删除输入框内容上面显示的文本内容随之减少 在下面输入框输入内容上面显示的内容也会增加 **注意：**在你写代码之前一定要引入Vue.js架包 代码演示 <!DOCTYPE html> <html> <head> <me...
vue双向绑定经典案例
春风化雨
12-14 807
1、无需废话，直接上代码 复制到新建的记事本文件，保存问demo.html即可。 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎系统</title> </head>
RAC 双向绑定实现案例
Secret Island
05-28 6607
案例1：正常情况下实现两个属性双向绑定// 方法一： RACChannelTo(view, property) = RACChannelTo(model, property);// 方法二：（与方法一完全等价） [[RACKVOChannel alloc] initWithTarget:view keyPath:@"property" nilValue:nil][@"followingTermina
Vue双向绑定原理与实战解析
Vue的双向绑定原理与用法揭秘深入剖析了Vue框架中的核心特性，它在用户界面实时同步数据更新方面扮演着关键角色。Vue的双向绑定主要基于MVVM（Model-View-ViewModel）架构，确保了视图（View）和模型（Model）之间的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YuanlongWang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值