Vue.js单向绑定和双向绑定实例分析

时间：2022-06-25 15:46:38 编辑：袖梨来源：一聚教程网

本文实例讲述了Vue.js单向绑定和双向绑定。分享给大家供大家参考，具体如下：

1、单向绑定

单向数据绑定的实现思路：

① 所有数据只有一份

② 一旦数据变化，就去更新页面(只有data-->DOM，没有DOM-->data)

③ 若用户在页面上做了更新，就手动收集(双向绑定是自动收集)，合并到原有的数据中。





   
    {{message}}

2、双向绑定

数据的双向绑定是vue实现的一大功能。

使用v-model指令，实现视图和数据的双向绑定。

所谓双向绑定，指的是vue实例中的data与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。这是通过设置属性访问器实现的。

v-model主要用在表单的input输入框，完成视图和数据的双向绑定。

v-model只能用在、</span>这些表单元素上。 </p> <p> 双向绑定的缺点：不知道<span style="color:#0000ff;">data</span>什么时候变了，也不知道是谁变了，变化后也不会通知，当然可以<code>watch</code>来监听<span style="color:#0000ff;">data</span>的变化，但这复杂，还不如单向绑定。 </p> <div class="jb51code"> <pre class="brush:js;"><!DOCTYPE html> <html> <head></head> <body> <div id="app"> <input type="text" v-model="message"> <p>{{message}}</p> </div> <script> var app = new Vue({ el: '#app', data: { message: '' } }); </script> </body> </html> </pre> </div> <div class="articles"> <div class="tit02"> <h4>相关文章</h4> </div> <ul> <li> <a target="_blank" href="/new/453694.htm">新盗墓笔记投资基金值得买吗?新盗墓笔记投资基金收益情况介绍</a> <span>08-02</span> </li> <li> <a target="_blank" href="/new/452895.htm">2025年数字货币交易平台推荐十大虚拟币交易app排名</a> <span>08-02</span> </li> <li> <a target="_blank" href="/new/453695.htm">《蜀门手游》快速升级攻略2025</a> <span>08-02</span> </li> <li> <a target="_blank" href="/new/453696.htm">新盗墓笔记月卡值得买吗?新盗墓笔记月卡购买收益效果介绍</a> <span>08-02</span> </li> <li> <a target="_blank" href="/new/453848.htm">SUI在突破后企稳于3.75美元支撑位，RSI呈中性</a> <span>08-02</span> </li> <li> <a target="_blank" href="/new/453697.htm">《寻道大千》精怪辰战技能介绍</a> <span>08-02</span> </li> </ul> </div> </div> <div class="pages art-detail"></div> </div> </div> </div> </div> <div class="hot-column"> <div class="cont"> <div class="tit"> <h4>热门栏目</h4> </div> <ul class="clearfix"> <li> <h6><a href="/list-1/" target="_blank">php教程</a></h6> <a href="/list-45/" target="_blank">php入门</a> <a href="/list-46/" target="_blank">php安全</a> <a href="/list-47/" target="_blank">php安装</a> <a href="/list-48/" target="_blank">php常用代码</a> <a href="/list-49/" target="_blank">php高级应用</a> </li> <li> <h6><a href="/list-2/" target="_blank">asp.net教程</a></h6> <a href="/list-78/" target="_blank">基础入门</a> <a href="/list-79/" target="_blank">.Net开发</a> <a href="/list-80/" target="_blank">C语言</a> <a href="/list-81/" target="_blank">VB.Net语言</a> <a href="/list-82/" target="_blank">WebService</a> </li> <li> <h6><a href="/list-6/" target="_blank">手机开发</a></h6> <a href="/list-208/" target="_blank">安卓教程</a> <a href="/list-209/" target="_blank">ios7教程</a> <a href="/list-210/" target="_blank">Windows Phone</a> <a href="/list-211/" target="_blank">Windows Mobile</a> <a href="/list-212/" target="_blank">手机常见问题</a> </li> <li> <h6><a href="/list-3/" target="_blank">css教程</a></h6> <a href="/list-99/" target="_blank">CSS入门</a> <a href="/list-100/" target="_blank">常用代码</a> <a href="/list-101/" target="_blank">经典案例</a> <a href="/list-102/" target="_blank">样式布局</a> <a href="/list-103/" target="_blank">高级应用</a> </li> <li> <h6><a href="/list-4/" target="_blank">网页制作</a></h6> <a href="/list-136/" target="_blank">设计基础</a> <a href="/list-137/" target="_blank">Dreamweaver</a> <a href="/list-138/" target="_blank">Frontpage</a> <a href="/list-139/" target="_blank">js教程</a> <a href="/list-140/" target="_blank">XNL/XSLT</a> </li> <li> <h6><a href="/list-7/" target="_blank">办公数码</a></h6> <a href="/list-236/" target="_blank">word</a> <a href="/list-237/" target="_blank">excel</a> <a href="/list-238/" target="_blank">powerpoint</a> <a href="/list-239/" target="_blank">金山WPS</a> <a href="/list-240/" target="_blank">电脑新手</a> </li> <li> <h6><a href="/list-11/" target="_blank">jsp教程</a></h6> <a href="/list-68/" target="_blank">Application与Applet</a> <a href="/list-69/" target="_blank">J2EE/EJB/服务器</a> <a href="/list-70/" target="_blank">J2ME开发</a> <a href="/list-71/" target="_blank">Java基础</a> <a href="/list-72/" target="_blank">Java技巧及代码</a> </li> </ul> </div> </div> <div class="footer"> <div class="cont"> <p> <a href="/" target="_self">一聚教程网</a>| <a href="javascript:;" class="about" target="_self">关于我们</a>| <a href="javascript:;" class="contact" target="_self">联系我们</a>| <a href="javascript:;" class="gg_contact" target="_self">广告合作</a>| <a href="javascript:;" class="friend_link" target="_self">友情链接</a>| <a href="javascript:;" class="copyright_notice" target="_self">版权声明</a> </p> <p> <span>copyRight@2007-2022 www.111CN.NET AII Right Reserved <a href="https://beian.miit.gov.cn/" target="_blank" class="beian"></a></span> </p> <p> <span> 网站内容来自网络整理或网友投稿如有侵权行为请邮件:111cn.com@163.com 我们24小时内处理 </span> </p> </div> </div> <script> var advData = {"img_fixed_pc_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e9729f58.jpg","img_fixed_mob_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e8793225.jpg","url_adv":"http:\/\/shop.hushen.cn\/shop\/c\/baojianpin.html","str_adv":"\u864e\u795e\u5546\u57ce\uff1a\u5173\u7231\u7537\u6027\uff0c\u66f4\u61c2\u7537\u4eba\u3002\u89e3\u51b3\u5927\u4f17\u7684\u7537\u8a00\u4e4b\u9690","img_popup_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e748238d.png","pc_show_img":"2","pc_show_popup":"2","pc_show_video":"2","mob_show_img":"2","mob_show_popup":"2","mob_show_video":"2","close_adv":"https:\/\/img.111cn.net\/uploads\/20240508\/663b20650801e.png","video_adv":"\/pc\/images\/pc-adv.mp4"}; </script> <script src="/jspc/func.js" type="text/javascript"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-DSRRGRV1TL"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DSRRGRV1TL'); </script><script src="/js/stat.js"></script> <script src="/111/js/shCore.js"></script> <script src="/111/js/shAutoloader.js"></script> <script type="text/javascript"> function path() { var args = arguments, result = []; for (var i = 0; i < args.length; i++) result.push(args[i].replace('$', '/111/js/')); return result } $(function() { SyntaxHighlighter.autoloader.apply(null, path( 'applescript $shBrushAppleScript.js', 'css $shBrushCss.js', 'java $shBrushJava.js', 'js jscript javascript $shBrushJScript.js', 'php $shBrushPhp.js', 'py python $shBrushPython.js', 'ruby rails ror rb $shBrushRuby.js', 'sass scss $shBrushSass.js', 'sql $shBrushSql.js', 'vb vbnet $shBrushVb.js', 'xml xhtml xslt html $shBrushXml.js' )); SyntaxHighlighter.all(); }); hljs.highlightAll(); </script> </body> </html>

推荐专题

最新下载

热门教程

Vue.js单向绑定和双向绑定实例分析