vue.js使用v-model指令实现的数据双向绑定功能示例

发布时间：2020-12-17 02:57:29 所属栏目：百科来源：网络整理

导读：本篇章节讲解vue.js使用v-model指令实现的数据双向绑定功能。供大家参考研究具体如下： vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍： v-model这个指令只能用在 , , 这些表单元素上，所谓双

本篇章节讲解vue.js使用v-model指令实现的数据双向绑定功能。分享给大家供大家参考，具体如下：

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

v-model这个指令只能用在,这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。这是通过设置属性访问器实现的。例如：</p> <p>app.html</p> <div class="jb51code"> <pre class="brush:js;"> <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> vuejs v-model 数据双向绑定 </title> <style type="text/css"> [v-cloak] { display: none } </style> </head> <body> <div id="app"> <form> 姓名： <input type="text" v-model="data.name" placeholder="姓名"/> <br /> 性别： <input type="radio" id="one" value="One" v-model="data.sex"/> <label for="man">男</label> <input type="radio" id="two" value="Two" v-model="data.sex"/> <label for="male">女</label> <br /> <input type="checkbox" id="jack" value="book" v-model="data.interest"/> <label for="jack">阅读</label> <input type="checkbox" id="john" value="swim" v-model="data.interest"/> <label for="john">游泳</label> <input type="checkbox" id="move" value="game" v-model="data.interest"/> <label for="move">游戏</label> <input type="checkbox" id="mike" value="song" v-model="data.interest"/> <label for="mike">唱歌</label> <br /> 身份： <select v-model="data.identity"> <option value="teacher" selected>教师</option> <option value="doctor">医生</option> <option value="lawyer">律师</option> </select> </form> <p><pre>data: {{$data | json 2}}</pre></p> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" charset="utf-8"></script> <script src="https://cdn.bootcss.com/vue/2.3.0/vue.min.js" charset="utf-8"></script> <script type="text/javascript"> $(function() { new Vue({ el: '#app',data: { data:{ name:'',sex:'',interest:[],identity:'' } } }) }) </script> </html> </pre> </div> <p>使用本站<span style="color: #0000ff"><h3>在线HTML/CSS/JavaScript代码运行工具</h3>测试运行效果如下：</p> <p><img src="https:https://files.52php.cn/file_images/article/201805/201852294034690.gif?201842294050" alt="" /></p> <p>希望本文所述对大家vue.js程序设计有所帮助。</p> <p style="text-align:right;">（编辑：李大同）</p> <p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p> </td> </tr> </table> </div> <div class="dede_pagess"><ul class="pagelist"></ul></div> <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div> <div class="g-box10"> <div class="t-2">相关内容</div> <ul class="b-box12"></ul> <ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/236447.html" target="_blank">Cocos2d-x shader学习3： sprite描边(Outline)</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/202626.html" target="_blank">单一职责原则</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/241609.html" target="_blank">ios – 自XCode 6.3 – >无法加载Nib</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/56224.html" target="_blank">Oracle使用游标更新数据</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/321651.html" target="_blank">数据结构复习重点归纳</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/306782.html" target="_blank">Flex 中自带的图标使用</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/39926.html" target="_blank">oracle – 如果不是函数PLSQL中的EXISTS</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/309205.html" target="_blank">BlazeDS配置文件说明</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/43514.html" target="_blank">创建small表空间size32G报错ORA-01144</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1213/119426.html" target="_blank">深度解读PostgreSQL 10.0版本新特性</a></li><div class="cl"></div></ul> </div> </div> </div> <div class="right-1 fr"> <div class="g-box8"> <div class="t-2">推荐文章</div> <ul></ul> </div> <div class="g-box11"> <div class="t-2">站长推荐</div> <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/512413.html" target="_blank">ruby-on-rails – 框架或CMS？</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/342942.html" target="_blank">create-react-app</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/404589.html" target="_blank">Echarts教程之通过Ajax实现动态加载折线图的方法</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1217/546460.html" target="_blank">Ruby string to_f … bug？</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/64586.html" target="_blank">详解Oracle修改字段类型方法总结</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/370717.html" target="_blank">Flash文本引擎, 第一部分: 概述</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1213/99785.html" target="_blank">如何在postgresql中使用递归查询连接字段值？</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/422138.html" target="_blank">Ajax技术以及jQuery对Ajax的支持</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/354077.html" target="_blank">React环境配置和基本使用</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/38473.html" target="_blank">oracle – 将查询结果导出到一组INSERT语句？</a></li></ul> </div> <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 }); </script> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div> <div class="g-box3 u-3"> <div class="t-1">热点阅读</div> <ul class="b-box2"></ul> </div> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div> </div> <div class="cl"></div> </div> <div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div> <div class="footer"> <p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p> <p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p> <p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p> <p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p> </div> </body> </html>