flutter v-model双向绑定指令

文章目录

前言v-model.lazy 延迟同步v-model.trim 去掉空格

前言

v-model指令是Vue.js中实现双向数据绑定的一种重要机制。它可以将表单控件的值与Vue.js实例中的数据进行双向绑定，即当表单控件的值发生变化时，Vue.js实例中的数据也会随之更新，反之亦然。

在使用v-model指令时，需要将其绑定到一个Vue.js实例中的数据上，例如：

看到 input 输入框，后面就要跟上v-model 看到 button 按钮，后面就要跟上@click

在上述代码中，v-model指令被绑定到了Vue.js实例中的message数据上当输入框的值发生变化时，v-model指令会自动将新的值更新到message数据中，实现了双向数据绑定。

需要注意的是，v-model指令只能用于表单控件，如、和<select>等。对于其他自定义组件，需要通过使用props和自定义事件来实现类似的双向数据绑定机制。</p><p>v-model.lazy 延迟同步</p><p>用于将表单元素的值与 Vue 实例的数据绑定。 .lazy 修饰符将输入事件转换为变更事件, 只有在元素失去焦点或用户按下回车键时，才会更新数据，从而实现了延迟同步的效果。这种方式可以避免不必要的更新，并且可以优化性能。</p><p>【代码示例1】</p><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p><meta charset="UTF-8"></p><p><meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p><title>Document</title></p><p></head></p><p><body></p><p><div id="app"></p><p>延迟同步 <input type="text" v-model.lazy="data1">{{data1}}</p><p></div></p><p><div id="ly_cache" data-id="17835500"></div></body></p><p><script src="../js/vue3.js"></script></p><p><script></p><p>let vm = Vue.createApp({</p><p>data() {</p><p>return {</p><p>data1: ''</p><p>}</p><p>},</p><p>})</p><p>vm.mount('#app')</p><p></script></p><p></html></p><p>【代码示例2】</p><p><template></p><p><div></p><p><input v-model.lazy="username" type="text" placeholder="Enter username" /></p><p><p>Username: {{ username }}</p></p><p></div></p><p></template></p><p><script></p><p>export default {</p><p>data() {</p><p>return {</p><p>username: '',</p><p>};</p><p>},</p><p>};</p><p></script></p><p>当用户在输入框中输入数据时，v-model.lazy指令告诉Vue不要立即同步输入的值到组件的data属性上。相反，它会等到用户离开输入框时，才会同步数据。</p><p>具体而言，当用户在输入框中输入数据时，Vue会将这些输入缓存起来，并在blur事件（即用户离开输入框）发生时，才将缓存中的数据同步到组件的data属性上。</p><p>在上面的示例中，当用户在输入框中输入用户名时，v-model.lazy="username"指定将输入的值绑定到组件实例的username属性上。当用户离开输入框时，组件的data属性中的username值将被更新，并在模板中使用插值语法{{ username }}显示。</p><p>v-model.trim 去掉空格</p><p>v-model.trim 是 Vue.js 提供的一个修饰符，用于将表单输入框中输入的内容去掉首尾空格。</p><p>在使用 v-model 绑定表单输入框的值时，可以在 v-model 后面加上 .trim，例如：</p><p><input type="text" v-model.trim="message"></p><p>这样在输入内容时，如果输入内容前后存在空格，则会自动去掉空格后绑定到 message 变量中。</p><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p><meta charset="UTF-8"></p><p><meta name="viewport" content="width=device-width, initial-scale=1.0"></p><p><title>Document</title></p><p></head></p><p><body></p><p><div id="app"></p><p>去掉空格 <input type="text" v-model.trim="data2"> <button @click="check">验证</button></p><p></div></p><p><div id="ly_cache" data-id="17835500"></div></body></p><p><script src="../js/vue3.js"></script></p><p><script></p><p>let vm = Vue.createApp({</p><p>data() {</p><p>return {</p><p>data2: ''</p><p>}</p><p>},</p><p>methods: {</p><p>check(){</p><p>console.log( this.data2.length );</p><p>}</p><p>},</p><p>})</p><p>vm.mount('#app')</p><p></script></p><p></html></p><p>好文阅读</p><div class="ly_isview_code_1"><div class="ly_isview_codea" data-id="17835500"><span><a href="https://www.51969.com/zb_system/login.php" target="_blank">评论可见</a>，请评论后查看内容，谢谢！！！</span></div></div><div id="tingliu" style="background-color:#FFFFFF;border:1px dashed #FF0000;text-align:center;display:block;"><span class="tingliu2 hint--top hint--bounce"><a href="##read_time"><img src="https://www.51969.com/zb_users/plugin/zharry_Reading_time/images/tishi.gif" class="tingliu5" ></a></span> <span class="tingliu2">您阅读本篇文章共花了：</span> <span class="tingliu3" id="stime"></span> </div></br><script language="JavaScript">var ss=0,mm=0,hh=0;function TimeGo(){ss++;if(ss>=60){mm+=1;ss=0}if(mm>=60){hh+=1;mm=0}ss_str=(ss<10?"0"+ss:ss);mm_str=(mm<10?"0"+mm:mm);tMsg=""+hh+"小时"+mm_str+"分"+ss_str+"秒";document.getElementById("stime").innerHTML=tMsg;setTimeout("TimeGo()",1000)}TimeGo();</script> </div> <div class="tags"> <a href="https://www.51969.com/tags/flutter/" target="_blank">flutter</a> </div> <div class="copyright"><blockquote>本文由用户于 2024-05-19 发布在金钥匙，如有疑问，请联系我们。<br>本文链接：<a href="https://www.51969.com/post/17835500.html">https://www.51969.com/post/17835500.html</a></blockquote></div> <div class="single-share"> <div class="post-share"> <a title="分享"><i class="jzicon-jzfenxiang"></i></a> <div class="share-icons share-sns" data-title="flutter v-model双向绑定指令" data-url="https://www.51969.com/post/17835500.html"> <span class="share-icon share-wechat cl" data-type="wechat" title="分享到微信"><i class="jzicon-weixin"></i><span id="wechat-qrcode"></span></span> <span class="share-icon share-sina-weibo cl" data-type="weibo" title="分享到微博"><i class="jzicon-weibo"></i></span><span class="share-icon share-qq cl" data-type="qq" title="分享到QQ好友"><i class="jzicon-qq"></i></span> </div> </div> <div class="post-like"> <a href="javascript:;" onclick="Jz52_tsqa_prise('17835500')" class="Jz52_tsqa_prise_id-17835500 dotGood Jz52_tsqa_prise badge" title="好文！一定要点赞！" data-badge="0"><i class="jzicon-jzzan-h"></i><em class="emz">0</em><em>赞</em></a><a href="javascript:;" class="comiis_poster_a single_icon bill_icon" title="文章海报"><i class="jzicon-jzimg"></i></a> </div></div> </div> <div class="nextpro www_51969_com"> <div class="prev"> <article class="post-overlay"> <div class="background-img" style="background-image:url(https://www.51969.com/zb_users/theme/Jz52_tsqa/style/images/prevnoimg.jpg)"> </div> <div class="post_text"> <span><i class="jzicon-angle-left"></i>上一篇</span> <h3 class="post__title typescale-1 nav-prev">性能优化 Android flutter项目启动优化实战（一）使用benchmark分析项目</h3> </div> <a href="https://www.51969.com/post/17835499.html" class="link-overlay"></a> </article> </div> <div class="next"> <article class="post-overlay"> <div class="background-img" style="background-image:url(https://www.51969.com/zb_users/theme/Jz52_tsqa/style/images/nextnoimg.jpg)"> </div> <div class="post_text"> <span>下一篇<i class="jzicon-angle-right"></i></span> <h3 class="post__title typescale-1 nav-next">android Flutter BottomNavigationBar：底部导航条实现页面切换</h3> </div> <a href="https://www.51969.com/post/17835501.html" class="link-overlay"></a> </article> </div> </div> <div class="related-list www_51969_com"> <h3><i class="jzicon-jztuwen"></i> 相关文章</h3> <ul> <li><a href="https://www.51969.com/post/18886554.html" title="Flutter 3.22 发布，快来看看有什么更新吧？"><p>Flutter 3.22 发布，快来看看有什么更新吧？</p></a> </li> <li><a href="https://www.51969.com/post/18896690.html" title="前端 javascript Flutter for Web：跨平台移动与Web开发的新篇章"><p>前端 javascript Flutter for Web：跨平台移动与Web开发的新篇章</p></a> </li> <li><a href="https://www.51969.com/post/18895311.html" title="音视频 flutter实现选择图片视频上传到oss和图片视频的预览功能"><p>音视频 flutter实现选择图片视频上传到oss和图片视频的预览功能</p></a> </li> <li><a href="https://www.51969.com/post/18890628.html" title="Flutter UI - Decoration 、shape，积累总结"><p>Flutter UI - Decoration 、shape，积累总结</p></a> </li> <li><a href="https://www.51969.com/post/18890285.html" title="Flutter：听说你最近到处和人说我解散了？"><p>Flutter：听说你最近到处和人说我解散了？</p></a> </li> <li><a href="https://www.51969.com/post/18889200.html" title="Flutter日历，可以自定义风格UI"><p>Flutter日历，可以自定义风格UI</p></a> </li> <li><a href="https://www.51969.com/post/18886568.html" title="javascript 前端 Flutter 中 ListView 的 4 种构建方式详解"><p>javascript 前端 Flutter 中 ListView 的 4 种构建方式详解</p></a> </li> <li><a href="https://www.51969.com/post/18885126.html" title="滑动 flutter的SingleChildScrollView控件详解"><p>滑动 flutter的SingleChildScrollView控件详解</p></a> </li> </ul> </div> <div class="comments www_51969_com"> <div id="comments" class="comments-area clearfix"> <div class="comment-list"><div class="jz-comment" id="divCommentPost"><h4 class="comments-title"> <span><i class="jzicon-jzqipaoc"></i>发表评论</span><a rel="nofollow" id="cancel-reply" href="#divCommentPost" style="display:none;float:right;"><small>取消回复</small></a></h4> <form id="frmSumbit" target="_self" method="post" action="https://www.51969.com/zb_system/cmd.php?act=cmt&postid=17835500&key=3c1b30e89bd3aa9f1439e44a1dbbd0ad" ><input type="hidden" name="inpId" id="inpId" value="17835500"><input type="hidden" name="inpRevID" id="inpRevID" value="0"><div class="jz-comment-box jz-comment-ul3"> <input type="text" name="inpName" id="inpName" class="text" value="" size="28" tabindex="1" placeholder="名称(*)"> </div> <div class="jz-comment-box jz-comment-ul3 jz-comment-ul3-2"> <input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2" placeholder="邮箱"> </div> <div class="jz-comment-box jz-comment-ul3"> <input type="text" name="inpHomePage" id="inpHomePage" class="text" value="" size="28" tabindex="3" placeholder="网站"> </div><div class="jz-comment-box jz-comment-textarea"> <textarea name="txaArticle" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" placeholder="欢迎在这里交流评论，但是垃圾评论不受欢迎！">