VUE.JS学习笔记（vmodel、HandlingForms）

作者：手机用户2502896851 | 来源：互联网 | 2023-09-11 12:34

vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍：v-model这个指令只能用在,{{selected}}{{multiS

vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍：

v-model这个指令只能用在, 这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。这是通过设置属性访问器实现的。例如：</code> <div class="cnblogs_code"> <pre>var data = { name: "erik", getName: function() { return this.name; }, setName: function(name) { this.name = name; } };</pre> </div> 上面的代码中我们通过<code>getName()</code>和<code>setName()</code>方法作为访问器，我们可以进一步严格限制（如借助Object.defineProperty方法）不直接访问name这个属性，所有对<code>data.name</code>的读写都必须通过<code>data.getName()</code>和<code>data.setName()</code>方法。此时我们改写访问器方法，添加对属性值改变得到监控，便可以实现数据的双向绑定。 那么在表单处理中我们具体如何使用v-model呢，先看看官方文档给出的例子： <div class="cnblogs_code"> <pre><form id="demo"> <p> <input type="text" v-model="msg"> {{msg}} </p> <p> <input type="checkbox" v-model="checked"> {{checked ? "yes" : "no"}} </p> <p> <input type="radio" name="picked" value="one" v-model="picked"> <input type="radio" name="picked" value="two" v-model="picked"> {{picked}} </p> <p> <select v-model="selected"> <option>one</option> <option>two</option> </select> {{selected}} </p> <p> <select v-model="multiSelect" multiple> <option>one</option> <option>two</option> <option>three</option> </select> {{multiSelect}} </p> <p><pre>data: {{$data | json 2}}</pre></p> </form></pre> </div> 对应的js： <div class="cnblogs_code"> <pre>new Vue({ el: ‘#demo‘, data: { msg : ‘hi!‘, checked : true, picked : ‘one‘, selected : ‘two‘, multiSelect: [‘one‘, ‘three‘] } })</pre> </div> 效果如下： <img alt="技术分享" src="https://img.php1.cn/3cd4a/1eebe/cd5/4283cd4bbba41b87.png" /> 小伙伴们可以尝试一下写出这个页面，在浏览器中当你调整上面表单元素的选中值时，你会发现下面打印的vue实例内容也会随之改变，而如果你在代码中改变vue实例data内容时渲染出来的表单选中值也会随之改变。 另外，v-model这个指令还有几个可选的参数：lazy,number,options,debounce<code> </code> 1.使用lazy参数是将双向数据同步的时间节点从input触发改为了change触发，调用方式如下： <div class="cnblogs_code"> <pre> <input v-model="msg" lazy></pre> </div> 2.使用number参数是通知v-model绑定的dom元素把用户输入值默认当成数字来处理，调用如下： <div class="cnblogs_code"> <pre><input v-model="age" number></pre> </div> 3.使用options参数是用于渲染一个select项的列表，调用方式如下： <div class="cnblogs_code"> <pre><select v-model="selected" options="myOptions"></select></pre> </div> 其中options的参数名指向一个数组，该数组可以包括字符串或对象，对象可以是{text:‘‘, value:‘‘}的形式，指定了<option>的value属性与text内容，例如： <div class="cnblogs_code"> <pre>[ { text: ‘A‘, value: ‘a‘ }, { text: ‘B‘, value: ‘b‘ } ]</pre> </div> 将渲染出： <div class="cnblogs_code"> <pre><select> <option value="a">A</option> <option value="b">B</option> </select></pre> </div> 如果对象是{ label:‘‘, options:[...] }的形式，则可以渲染出多个option组<optgroup>,如下例： <div class="cnblogs_code"> <pre>[ { label: ‘A‘, options: [‘a‘, ‘b‘]}, { label: ‘B‘, options: [‘c‘, ‘d‘]} ]</pre> </div> 将渲染出： <div class="cnblogs_code"> <pre><select> <optgroup label="A"> <option value="a">a</option> <option value="b">b</option> </optgroup> <optgroup label="B"> <option value="c">c</option> <option value="d">d</option> </optgroup> </select></pre> </div> 4.使用debounce参数是指定一个延迟时间，延迟从按键触发到数据更新同步之间的时间，当我们的更新操作比较耗时时这个属性十分有用，例如搜索引擎在我们键入字符时发送ajax请求完成自动补全提示，调用如下： <div class="cnblogs_code"> <pre><input v-model="msg" debounce="500"></pre> </div> <div><img alt="技术分享" src="file:///C:\Users\Byron\AppData\Roaming\Tencent\Users\1966997923\QQ\WinTemp\RichOle\YZQ`D3X0$DUDNM$V0RX9BYQ.png" /></div>VUE.JS学习笔记（v-model、Handling Forms） <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/android" target="_blank" title="android">android</a></li> <li><a href="https://www.php1.cn/tag/asp.net" target="_blank" title="asp.net">asp.net</a></li> <li><a href="https://www.php1.cn/tag/php" target="_blank" title="php">php</a></li> <li><a href="https://www.php1.cn/tag/jsp" target="_blank" title="jsp">jsp</a></li> <li><a href="https://www.php1.cn/tag/数据库" target="_blank" title="数据库">数据库</a></li> <li><a href="https://www.php1.cn/tag/vue.js" target="_blank" title="vue.js">vue.js</a></li> <li><a href="https://www.php1.cn/tag/select" target="_blank" title="select">select</a></li> <li><a href="https://www.php1.cn/tag/windows" target="_blank" title="windows">windows</a></li> <li><a href="https://www.php1.cn/tag/html" target="_blank" title="html">html</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了


            
                
                                        会员登录 | 用户注册



    
        推荐阅读
        
            
                                
                    
                        web
                        Framework7：构建跨平台移动应用的高效框架
                    

                    
                                                
                            
                        
                                                
                        Framework7 是一个开源免费的框架，适用于开发混合移动应用（原生与HTML混合）或iOS&Android风格的Web应用。此外，它还可以作为原型开发工具，帮助开发者快速创建应用原型。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-12 14:47:56
                    

                

                
                                
                    
                        int
                        第二十五天接口、多态
                    

                    
                                                
                            
                        
                                                
                        1.java是面向对象的语言。设计模式：接口接口类是从java里衍生出来的，不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-12 06:43:20
                    

                

                                
                    
                    
                
                
                                
                    
                        js
                        华为云对象存储系统配置指南
                    

                    
                                                
                        本指南详细介绍了如何利用华为云对象存储服务构建视频点播（VoD）平台。通过结合开源技术如Ceph、WordPress、PHP和Nginx，用户可以高效地实现数据存储、内容管理和网站搭建。主要内容涵盖华为云对象存储系统的配置步骤、性能优化及安全设置，为开发者提供全面的技术支持。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-11 14:29:52
                    

                

                
                                
                    
                        js
                        解决DNS服务器配置转发无法解析的问题
                    

                    
                                                
                        本文详细介绍了如何解决DNS服务器配置转发无法解析的问题，包括编辑主配置文件和重启域名服务的具体步骤。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-13 02:41:19
                    

                

                
                                
                    
                        js
                        数字资产交易平台量化交易系统开发
                    

                    
                                                
                        数字资产量化交易通过大数据分析，以客观的方式制定交易决策，有效减少人为的主观判断和情绪影响。本文介绍了几种常见的数字资产量化交易策略，包括搬砖套利和趋势交易，并探讨了量化交易软件的开发前景。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-12 21:49:55
                    

                

                
                                
                    
                        int
                        解决 Windows Server 2016 网络连接问题
                    

                    
                                                
                            
                        
                                                
                        本文详细介绍了如何解决 Windows Server 2016 在使用无线网络 (WLAN) 和有线网络 (以太网) 时遇到的连接问题。包括添加必要的功能和安装正确的驱动程序。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-12 00:01:44
                    

                

                
                                
                    
                        int
                        使用Jsoup解析并遍历HTML文档结构
                    

                    
                                                
                        使用Jsoup解析并遍历HTML文档时，该库能够高效地生成一个清晰、规范的解析树，即使源HTML文档存在格式问题。Jsoup具备强大的容错能力，能够处理多种异常情况，如未闭合的标签等，确保解析结果的准确性和完整性。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-11 21:30:03
                    

                

                
                                
                    
                        js
                        CentOS 7 中 iptables 过滤表实例与 NAT 表应用详解
                    

                    
                                                
                            
                        
                                                
                        在 CentOS 7 系统中，iptables 的过滤表和 NAT 表具有重要的应用价值。本文通过具体实例详细介绍了如何配置 iptables 的过滤表，包括编写脚本文件 `/usr/local/sbin/iptables.sh`，并使用 `iptables -F` 清空现有规则。此外，还深入探讨了 NAT 表的配置方法，帮助读者更好地理解和应用这些网络防火墙技术。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-11 18:33:22
                    

                

                
                                
                    
                        int
                        未加载符号表，请使用“file”命令加载目标文件以进行调试。
                    

                    
                                                
                        在使用Eclipse进行调试时，如果遇到未解析的断点（unresolved breakpoint）并显示“未加载符号表，请使用‘file’命令加载目标文件以进行调试”的错误提示，这通常是因为调试器未能正确加载符号表。解决此问题的方法是通过GDB的`file`命令手动加载目标文件，以便调试器能够识别和解析断点。具体操作为在GDB命令行中输入 `(gdb) file `。这一步骤确保了调试环境能够正确访问和解析程序中的符号信息，从而实现有效的调试。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-11 18:21:47
                    

                

                
                                
                    
                        int
                        LeetCode 有效回文串 II：深入解析与优化算法
                    

                    
                                                
                        在 LeetCode 的“有效回文串 II”问题中，给定一个非空字符串 `s`，允许删除最多一个字符。本篇深入解析了如何判断删除一个字符后，字符串是否能成为回文串，并提出了高效的优化算法。通过详细的分析和代码实现，本文提供了多种解决方案，帮助读者更好地理解和应用这一算法。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-11 17:40:42
                    

                

                
                                
                    
                        js
                        系统数据实体验证异常：多个实体验证失败的错误处理与分析
                    

                    
                                                
                            
                        
                                                
                        在使用MVC和EF框架进行数据保存时，遇到了 `System.Data.Entity.Validation.DbEntityValidationException` 错误，表明存在一个或多个实体验证失败的情况。本文详细分析了该错误的成因，并提出了有效的处理方法，包括检查实体属性的约束条件、调试日志的使用以及优化数据验证逻辑，以确保数据的一致性和完整性。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-11 16:54:45
                    

                

                
                                
                    
                        js
                        MySQL查询执行流程详解
                    

                    
                                                
                        MySQL的查询执行流程涉及多个关键组件，包括连接器、查询缓存、分析器和优化器。在服务层，连接器负责建立与客户端的连接，查询缓存用于存储和检索常用查询结果，以提高性能。分析器则解析SQL语句，生成语法树，而优化器负责选择最优的查询执行计划。这一流程确保了MySQL能够高效地处理各种复杂的查询请求。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-11 16:48:32
                    

                

                
                                
                    
                        js
                        装饰者模式（Decorator）：一种灵活的对象结构设计模式
                    

                    
                                                
                            
                        
                                                
                        装饰者模式（Decorator）是一种灵活的对象结构设计模式，旨在为单个对象动态地添加功能，而无需修改原有类的结构。通过封装对象并提供额外的行为，装饰者模式比传统的继承方式更加灵活和可扩展。例如，可以在运行时为特定对象添加边框或滚动条等特性，而不会影响其他对象。这种模式特别适用于需要在不同情况下动态组合功能的场景。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-11 16:36:53
                    

                

                
                                
                    
                        int
                        【Python 实战：汇率转换器 v1.02】
                    

                    
                                                
                        本项目通过Python编程实现了一个简单的汇率转换器v1.02。主要内容包括：1. Python的基本语法元素：（1）缩进：用于表示代码的层次结构，是Python中定义程序框架的唯一方式；（2）注释：提供开发者说明信息，不参与实际运行，通常每个代码块添加一个注释；（3）常量和变量：用于存储和操作数据，是程序执行过程中的重要组成部分。此外，项目还涉及了函数定义、用户输入处理和异常捕获等高级特性，以确保程序的健壮性和易用性。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-11 16:34:26
                    

                

                
                                
                    
                        int
                        Autofac高级应用实例解析
                    

                    
                                                
                        本文详细解析了Autofac在高级应用场景中的具体实现，特别是如何通过注册泛型接口的类来优化依赖注入。示例代码展示了如何使用 `builder.RegisterAssemblyTypes` 方法，结合 `typeof(IEventHandler).Assembly` 和 `Where` 过滤条件，动态注册所有符合条件的类，从而简化配置并提高代码的可维护性。此外，文章还探讨了这一方法在复杂系统中的实际应用及其优势。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2024-11-11 15:48:02