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

您现在的位置：首页 > 技术文档 > js框架/js库

来源：中文源码网浏览：176 次日期：2024-04-14 21:39:16

【下载文档: vue.js使用v-model指令实现的数据双向绑定功能示例.txt 】

vue.js使用v-model指令实现的数据双向绑定功能示例
本文实例讲述了vue.js使用v-model指令实现的数据双向绑定功能。分享给大家供大家参考，具体如下：
vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍：
v-model这个指令只能用在,

这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。这是通过设置属性访问器实现的。例如：<br/>app.html<br/><!doctype html><br/><html lang="zh-CN"><br/><head><br/><meta charset="UTF-8"><br/><title><br/>vuejs v-model 数据双向绑定<br/></title><br/><style type="text/css"><br/>[v-cloak] { display: none }<br/></style><br/></head><br/><body><br/><div id="app"><br/><form><br/>姓名：<br/><input type="text" v-model="data.name" placeholder="姓名"/><br/><br /><br/>性别：<br/><input type="radio" id="one" value="One" v-model="data.sex"/><br/><label for="man">男</label><br/><input type="radio" id="two" value="Two" v-model="data.sex"/><br/><label for="male">女</label><br/><br /><br/><input type="checkbox" id="jack" value="book" v-model="data.interest"/><br/><label for="jack">阅读</label><br/><input type="checkbox" id="john" value="swim" v-model="data.interest"/><br/><label for="john">游泳</label><br/><input type="checkbox" id="move" value="game" v-model="data.interest"/><br/><label for="move">游戏</label><br/><input type="checkbox" id="mike" value="song" v-model="data.interest"/><br/><label for="mike">唱歌</label><br/><br /><br/>身份：<br/><select v-model="data.identity"><br/><option value="teacher" selected>教师</option><br/><option value="doctor">医生</option><br/><option value="lawyer">律师</option><br/></select><br/></form><br/><p><pre>data: {{$data | json 2}}</pre></p><br/></div><br/></body><br/><script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" charset="utf-8"></script><br/><script src="http://cdn.bootcss.com/vue/2.3.0/vue.min.js" charset="utf-8"></script><br/><script type="text/javascript"><br/>$(function() {<br/>new Vue({<br/>el: '#app',<br/>data: {<br/>data:{<br/>name:'',<br/>sex:'',<br/>interest:[],<br/>identity:''<br/>}<br/>}<br/>})<br/>})<br/></script><br/></html><br/>使用本站在线HTML/CSS/JavaScript代码运行工具http://tools.zwyuanma.com/code/HtmlJsRun测试运行效果如下：<br/>希望本文所述对大家vue.js程序设计有所帮助。				
				</div>

<div class=powered>
<dt class="title-link">
<p><b>上一篇：</b><a href='/jishuwendang/class52/13076.html'>vue.js使用v-pre与v-html输出HTML操作示例</a></p>
<p><b>下一篇：</b><a href='/jishuwendang/class52/13074.html'>vue.js使用v-if实现显示与隐藏功能示例</a></p>
</dt><div class="share"><div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["weixin","sqq","qzone","tsina"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script></div></div>
			</div>
			
			<div class="rinfo">
				<div class="box-header"><h4 style="float:left;width:200px">相关内容</h4></div>
				<div class="news_link" style="height:1500px">
				<ul>
<li>• <a href="/jishuwendang/class52/13729.html" title="angular 内存溢出的问题解决" target="_blank">angular 内存溢出的问题解决</a></li>
<li>• <a href="/jishuwendang/class52/13728.html" title="Angular 封装并发布组件的方法示例" target="_blank">Angular 封装并发布组件的方法示例</a></li>
<li>• <a href="/jishuwendang/class52/13727.html" title="Angular Renderer (渲染器)的具体使用" target="_blank">Angular Renderer (渲染器)的具体使用</a></li>
<li>• <a href="/jishuwendang/class52/13726.html" title="Angular ng-animate和ng-cookies用法详解" target="_blank">Angular ng-animate和ng-cookies用法详解</a></li>
<li>• <a href="/jishuwendang/class52/13725.html" title="5分钟学会Vue动画效果(小结)" target="_blank">5分钟学会Vue动画效果(小结)</a></li>
<li>• <a href="/jishuwendang/class52/13724.html" title=".vue文件 加scoped 样式不起作用的解决方法" target="_blank">.vue文件 加scoped 样式不起作用的解决方法</a></li>
<li>• <a href="/jishuwendang/class52/13723.html" title="最后说说Vue2 SSR 的 Cookies 问题" target="_blank">最后说说Vue2 SSR 的 Cookies 问题</a></li>
<li>• <a href="/jishuwendang/class52/13722.html" title="自定义vue组件发布到npm的方法" target="_blank">自定义vue组件发布到npm的方法</a></li>
<li>• <a href="/jishuwendang/class52/13721.html" title="重新认识vue之事件阻止冒泡的实现" target="_blank">重新认识vue之事件阻止冒泡的实现</a></li>
<li>• <a href="/jishuwendang/class52/13720.html" title="在vue中使用公共过滤器filter的方法" target="_blank">在vue中使用公共过滤器filter的方法</a></li>
<li>• <a href="/jishuwendang/class52/13719.html" title="在vue中使用Autoprefixed的方法" target="_blank">在vue中使用Autoprefixed的方法</a></li>
<li>• <a href="/jishuwendang/class52/13718.html" title="在Vue项目中使用d3.js的实例代码" target="_blank">在Vue项目中使用d3.js的实例代码</a></li>
<li>• <a href="/jishuwendang/class52/13717.html" title="在vue-cli项目中使用bootstrap的方法示例" target="_blank">在vue-cli项目中使用bootstrap的方法示例</a></li>
<li>• <a href="/jishuwendang/class52/13716.html" title="在vue-cli搭建的项目中增加后台mock接口的方法" target="_blank">在vue-cli搭建的项目中增加后台mock接口的方法</a></li>
<li>• <a href="/jishuwendang/class52/13715.html" title="在vue2.0中引用element-ui组件库的方法" target="_blank">在vue2.0中引用element-ui组件库的方法</a></li>
<li>• <a href="/jishuwendang/class52/13714.html" title="在vscode里使用.vue代码模板的方法" target="_blank">在vscode里使用.vue代码模板的方法</a></li>
<li>• <a href="/jishuwendang/class52/13713.html" title="在react中使用vuex的示例代码" target="_blank">在react中使用vuex的示例代码</a></li>
<li>• <a href="/jishuwendang/class52/13712.html" title="在Mac下彻底卸载node和npm的方法" target="_blank">在Mac下彻底卸载node和npm的方法</a></li>
<li>• <a href="/jishuwendang/class52/13711.html" title="在create-react-app中使用css modules的示例代码" target="_blank">在create-react-app中使用css modules的示例代码</a></li>
<li>• <a href="/jishuwendang/class52/13710.html" title="在angular 6中使用 less 的实例代码" target="_blank">在angular 6中使用 less 的实例代码</a></li>
<li>• <a href="/jishuwendang/class52/13709.html" title="在 vue-cli v3.0 中使用 SCSS_SASS的方法" target="_blank">在 vue-cli v3.0 中使用 SCSS_SASS的方法</a></li>
<li>• <a href="/jishuwendang/class52/13708.html" title="在 Vue 项目中引入 tinymce 富文本编辑器的完整代码" target="_blank">在 Vue 项目中引入 tinymce 富文本编辑器的完整代码</a></li>
<li>• <a href="/jishuwendang/class52/13707.html" title="在 Angular6 中使用 HTTP 请求服务端数据的步骤详解" target="_blank">在 Angular6 中使用 HTTP 请求服务端数据的步骤详解</a></li>
<li>• <a href="/jishuwendang/class52/13706.html" title="再谈Angular4 脏值检测(性能优化)" target="_blank">再谈Angular4 脏值检测(性能优化)</a></li>
<li>• <a href="/jishuwendang/class52/13705.html" title="原生实现一个react-redux的代码示例" target="_blank">原生实现一个react-redux的代码示例</a></li>
<li>• <a href="/jishuwendang/class52/13704.html" title="用Vue写一个分页器的示例代码" target="_blank">用Vue写一个分页器的示例代码</a></li>
<li>• <a href="/jishuwendang/class52/13703.html" title="用vue快速开发app的脚手架工具" target="_blank">用vue快速开发app的脚手架工具</a></li>
<li>• <a href="/jishuwendang/class52/13702.html" title="用react-redux实现react组件之间数据共享的方法" target="_blank">用react-redux实现react组件之间数据共享的方法</a></li>
<li>• <a href="/jishuwendang/class52/13701.html" title="用Node提供静态文件服务的方法" target="_blank">用Node提供静态文件服务的方法</a></li>
<li>• <a href="/jishuwendang/class52/13700.html" title="用Node编写RESTful API接口的示例代码" target="_blank">用Node编写RESTful API接口的示例代码</a></li>
<li>• <a href="/jishuwendang/class52/13699.html" title="用ES6的class模仿Vue写一个双向绑定的示例代码" target="_blank">用ES6的class模仿Vue写一个双向绑定的示例代码</a></li>
<li>• <a href="/jishuwendang/class52/13698.html" title="以v-model与promise两种方式实现vue弹窗组件" target="_blank">以v-model与promise两种方式实现vue弹窗组件</a></li>
<li>• <a href="/jishuwendang/class52/13697.html" title="一个简单的node.js界面实现方法" target="_blank">一个简单的node.js界面实现方法</a></li>
<li>• <a href="/jishuwendang/class52/13696.html" title="一个基于react的图片裁剪组件示例" target="_blank">一个基于react的图片裁剪组件示例</a></li>
<li>• <a href="/jishuwendang/class52/13695.html" title="一个Vue页面的内存泄露分析详解" target="_blank">一个Vue页面的内存泄露分析详解</a></li>
<li>• <a href="/jishuwendang/class52/13694.html" title="一个Vue视频媒体多段裁剪组件的实现示例" target="_blank">一个Vue视频媒体多段裁剪组件的实现示例</a></li>
<li>• <a href="/jishuwendang/class52/13693.html" title="学习Vue组件实例" target="_blank">学习Vue组件实例</a></li>
<li>• <a href="/jishuwendang/class52/13692.html" title="学习React中ref的两个demo示例" target="_blank">学习React中ref的两个demo示例</a></li>
<li>• <a href="/jishuwendang/class52/13691.html" title="修改Nodejs内置的npm默认配置路径方法" target="_blank">修改Nodejs内置的npm默认配置路径方法</a></li>
<li>• <a href="/jishuwendang/class52/13690.html" title="修改node.js默认的npm安装目录实例" target="_blank">修改node.js默认的npm安装目录实例</a></li>
<li>• <a href="/jishuwendang/class52/13689.html" title="详解组件库的webpack构建速度优化" target="_blank">详解组件库的webpack构建速度优化</a></li>
<li>• <a href="/jishuwendang/class52/13688.html" title="详解在Vue中使用TypeScript的一些思考(实践)" target="_blank">详解在Vue中使用TypeScript的一些思考(实践)</a></li>
<li>• <a href="/jishuwendang/class52/13687.html" title="详解在React中跨组件分发状态的三种方法" target="_blank">详解在React中跨组件分发状态的三种方法</a></li>
<li>• <a href="/jishuwendang/class52/13686.html" title="详解在React.js中使用PureComponent的重要性和使用方式" target="_blank">详解在React.js中使用PureComponent的重要性和使用方式</a></li>
<li>• <a href="/jishuwendang/class52/13685.html" title="详解通过源码解析Node.js中cluster模块的主要功能实现" target="_blank">详解通过源码解析Node.js中cluster模块的主要功能实现</a></li>
<li>• <a href="/jishuwendang/class52/13684.html" title="详解使用VueJS开发项目中的兼容问题" target="_blank">详解使用VueJS开发项目中的兼容问题</a></li>
<li>• <a href="/jishuwendang/class52/13683.html" title="详解使用vue-admin-template的优化历程" target="_blank">详解使用vue-admin-template的优化历程</a></li>
<li>• <a href="/jishuwendang/class52/13682.html" title="详解使用create-react-app添加css modules、sasss和antd" target="_blank">详解使用create-react-app添加css modules、sasss和antd</a></li>
<li>• <a href="/jishuwendang/class52/13681.html" title="详解使用create-react-app快速构建React开发环境" target="_blank">详解使用create-react-app快速构建React开发环境</a></li>
<li>• <a href="/jishuwendang/class52/13680.html" title="详解使用 Node.js 开发简单的脚手架工具" target="_blank">详解使用 Node.js 开发简单的脚手架工具</a></li>
<li>• <a href="/jishuwendang/class52/13679.html" title="详解如何在你的Vue项目配置vux" target="_blank">详解如何在你的Vue项目配置vux</a></li>
<li>• <a href="/jishuwendang/class52/13678.html" title="详解如何在vue-cli中使用vuex" target="_blank">详解如何在vue-cli中使用vuex</a></li>
<li>• <a href="/jishuwendang/class52/13677.html" title="详解如何从零开始搭建Express+Vue开发环境" target="_blank">详解如何从零开始搭建Express+Vue开发环境</a></li>
<li>• <a href="/jishuwendang/class52/13676.html" title="详解开发react应用最好用的脚手架 create-react-app" target="_blank">详解开发react应用最好用的脚手架 create-react-app</a></li>
<li>• <a href="/jishuwendang/class52/13675.html" title="详解基于vue的服务端渲染框架NUXT" target="_blank">详解基于vue的服务端渲染框架NUXT</a></li>
<li>• <a href="/jishuwendang/class52/13674.html" title="详解基于Vue-cli搭建的项目如何和后台交互" target="_blank">详解基于Vue-cli搭建的项目如何和后台交互</a></li>
<li>• <a href="/jishuwendang/class52/13672.html" title="详解基于Vue cli生成的Vue项目的webpack4升级" target="_blank">详解基于Vue cli生成的Vue项目的webpack4升级</a></li>
<li>• <a href="/jishuwendang/class52/13671.html" title="详解基于Node.js的HTTP_2 Server实践" target="_blank">详解基于Node.js的HTTP_2 Server实践</a></li>
<li>• <a href="/jishuwendang/class52/13670.html" title="详解关于vue-area-linkage走过的坑" target="_blank">详解关于vue-area-linkage走过的坑</a></li>
<li>• <a href="/jishuwendang/class52/13669.html" title="详解各版本React路由的跳转的方法" target="_blank">详解各版本React路由的跳转的方法</a></li>
<li>• <a href="/jishuwendang/class52/13668.html" title="详解封装基础的angular4的request请求方法" target="_blank">详解封装基础的angular4的request请求方法</a></li>
<li>• <a href="/jishuwendang/class52/13667.html" title="详解从Vue-router到html5的pushState" target="_blank">详解从Vue-router到html5的pushState</a></li>
<li>• <a href="/jishuwendang/class52/13666.html" title="详解创建自定义的Angular Schematics" target="_blank">详解创建自定义的Angular Schematics</a></li>
<li>• <a href="/jishuwendang/class52/13665.html" title="详解处理bootstrap4不支持远程静态框问题" target="_blank">详解处理bootstrap4不支持远程静态框问题</a></li>
<li>• <a href="/jishuwendang/class52/13664.html" title="详解操作虚拟dom模拟react视图渲染" target="_blank">详解操作虚拟dom模拟react视图渲染</a></li>
<li>• <a href="/jishuwendang/class52/13663.html" title="详解vue组件开发脚手架" target="_blank">详解vue组件开发脚手架</a></li>
<li>• <a href="/jishuwendang/class52/13662.html" title="详解vue组件基础" target="_blank">详解vue组件基础</a></li>
<li>• <a href="/jishuwendang/class52/13661.html" title="详解VUE自定义组件中用.sync修饰符与v-model的区别" target="_blank">详解VUE自定义组件中用.sync修饰符与v-model的区别</a></li>
<li>• <a href="/jishuwendang/class52/13660.html" title="详解vue中组件参数" target="_blank">详解vue中组件参数</a></li>
<li>• <a href="/jishuwendang/class52/13659.html" title="详解Vue中使用Echarts的两种方式" target="_blank">详解Vue中使用Echarts的两种方式</a></li>
<li>• <a href="/jishuwendang/class52/13658.html" title="详解vue中点击空白处隐藏div的实现（用指令实现）" target="_blank">详解vue中点击空白处隐藏div的实现（用指令实现）</a></li>
<li>• <a href="/jishuwendang/class52/13657.html" title="详解VUE中常用的几种import（模块、文件）引入方式" target="_blank">详解VUE中常用的几种import（模块、文件）引入方式</a></li>
<li>• <a href="/jishuwendang/class52/13656.html" title="详解Vue中watch的高级用法" target="_blank">详解Vue中watch的高级用法</a></li>
<li>• <a href="/jishuwendang/class52/13655.html" title="详解vue中axios的封装" target="_blank">详解vue中axios的封装</a></li>
<li>• <a href="/jishuwendang/class52/13654.html" title="详解vue指令与$nextTick 操作DOM的不同之处" target="_blank">详解vue指令与$nextTick 操作DOM的不同之处</a></li>
<li>• <a href="/jishuwendang/class52/13653.html" title="详解Vue源码学习之callHook钩子函数" target="_blank">详解Vue源码学习之callHook钩子函数</a></li>
<li>• <a href="/jishuwendang/class52/13652.html" title="详解vue项目中如何引入全局sass_less变量、function、mixin" target="_blank">详解vue项目中如何引入全局sass_less变量、function、mixin</a></li>
<li>• <a href="/jishuwendang/class52/13651.html" title="详解Vue项目编译后部署在非网站根目录的解决方案" target="_blank">详解Vue项目编译后部署在非网站根目录的解决方案</a></li>
<li>• <a href="/jishuwendang/class52/13650.html" title="详解vue填坑之解决部分浏览器不支持pushState方法" target="_blank">详解vue填坑之解决部分浏览器不支持pushState方法</a></li>
<li>• <a href="/jishuwendang/class52/13649.html" title="详解vue添加删除元素的方法" target="_blank">详解vue添加删除元素的方法</a></li>
<li>• <a href="/jishuwendang/class52/13648.html" title="详解Vue取消eslint语法限制" target="_blank">详解Vue取消eslint语法限制</a></li>
<li>• <a href="/jishuwendang/class52/13647.html" title="详解VUE-地区选择器(V-Distpicker)组件使用心得" target="_blank">详解VUE-地区选择器(V-Distpicker)组件使用心得</a></li>
<li>• <a href="/jishuwendang/class52/13646.html" title="详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)" target="_blank">详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)</a></li>
<li>• <a href="/jishuwendang/class52/13645.html" title="详解vue的diff算法原理" target="_blank">详解vue的diff算法原理</a></li>
<li>• <a href="/jishuwendang/class52/13644.html" title="详解Vue单元测试case写法" target="_blank">详解Vue单元测试case写法</a></li>
<li>• <a href="/jishuwendang/class52/13643.html" title="详解vuex中mutation_action的传参方式" target="_blank">详解vuex中mutation_action的传参方式</a></li>
<li>• <a href="/jishuwendang/class52/13642.html" title="详解vuex结合localstorage动态监听storage的变化" target="_blank">详解vuex结合localstorage动态监听storage的变化</a></li>
<li>• <a href="/jishuwendang/class52/13641.html" title="详解vue-router 命名路由和命名视图" target="_blank">详解vue-router 命名路由和命名视图</a></li>
<li>• <a href="/jishuwendang/class52/13640.html" title="详解vue-router 初始化时做了什么" target="_blank">详解vue-router 初始化时做了什么</a></li>
<li>• <a href="/jishuwendang/class52/13639.html" title="详解vue-loader在项目中是如何配置的" target="_blank">详解vue-loader在项目中是如何配置的</a></li>
<li>• <a href="/jishuwendang/class52/13638.html" title="详解VueJs中的V-bind指令" target="_blank">详解VueJs中的V-bind指令</a></li>
<li>• <a href="/jishuwendang/class52/13637.html" title="详解vue-cli中模拟数据的两种方法" target="_blank">详解vue-cli中模拟数据的两种方法</a></li>
<li>• <a href="/jishuwendang/class52/13636.html" title="详解Vue-cli中的静态资源管理（src_assets和static_的区别）" target="_blank">详解Vue-cli中的静态资源管理（src_assets和static_的区别）</a></li>
<li>• <a href="/jishuwendang/class52/13635.html" title="详解vue-cli项目中怎么使用mock数据" target="_blank">详解vue-cli项目中怎么使用mock数据</a></li>
<li>• <a href="/jishuwendang/class52/13634.html" title="详解vue-cli官方脚手架配置" target="_blank">详解vue-cli官方脚手架配置</a></li>
<li>• <a href="/jishuwendang/class52/13633.html" title="详解vue-cli3使用" target="_blank">详解vue-cli3使用</a></li>
<li>• <a href="/jishuwendang/class52/13632.html" title="详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper" target="_blank">详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper</a></li>
<li>• <a href="/jishuwendang/class52/13631.html" title="详解vue-cli 本地开发mock数据使用方法" target="_blank">详解vue-cli 本地开发mock数据使用方法</a></li>
<li>• <a href="/jishuwendang/class52/13630.html" title="详解Vue2.0配置mint-ui踩过的那些坑" target="_blank">详解Vue2.0配置mint-ui踩过的那些坑</a></li>
<li>• <a href="/jishuwendang/class52/13629.html" title="详解vue2.0监听属性的使用心得及搭配计算属性的使用" target="_blank">详解vue2.0监听属性的使用心得及搭配计算属性的使用</a></li>
<li>• <a href="/jishuwendang/class52/13628.html" title="详解vue2.0+axios+mock+axios-mock+adapter实现登陆" target="_blank">详解vue2.0+axios+mock+axios-mock+adapter实现登陆</a></li>
<li>• <a href="/jishuwendang/class52/13627.html" title="详解vue+webpack+express中间件接口使用" target="_blank">详解vue+webpack+express中间件接口使用</a></li>
<li>• <a href="/jishuwendang/class52/13626.html" title="详解Vue+axios+Node+express实现文件上传(用户头像上传)" target="_blank">详解Vue+axios+Node+express实现文件上传(用户头像上传)</a></li>
<li>• <a href="/jishuwendang/class52/13625.html" title="详解Vue.js中.native修饰符" target="_blank">详解Vue.js中.native修饰符</a></li>
<li>• <a href="/jishuwendang/class52/13624.html" title="详解vue.js下引入百度地图jsApi的两种方法" target="_blank">详解vue.js下引入百度地图jsApi的两种方法</a></li>
<li>• <a href="/jishuwendang/class52/13623.html" title="详解vue.js根据不同环境(正式、测试)打包到不同目录" target="_blank">详解vue.js根据不同环境(正式、测试)打包到不同目录</a></li>
<li>• <a href="/jishuwendang/class52/13622.html" title="详解vue 数据传递的方法" target="_blank">详解vue 数据传递的方法</a></li>
<li>• <a href="/jishuwendang/class52/13621.html" title="详解vue 计算属性与方法跟侦听器区别(面试考点)" target="_blank">详解vue 计算属性与方法跟侦听器区别(面试考点)</a></li>
<li>• <a href="/jishuwendang/class52/13620.html" title="详解Vue 多级组件透传新方法provide_inject" target="_blank">详解Vue 多级组件透传新方法provide_inject</a></li>
<li>• <a href="/jishuwendang/class52/13619.html" title="详解Vue webapp项目通过HBulider打包原生APP" target="_blank">详解Vue webapp项目通过HBulider打包原生APP</a></li>
<li>• <a href="/jishuwendang/class52/13618.html" title="详解Vue SPA项目优化小记" target="_blank">详解Vue SPA项目优化小记</a></li>
<li>• <a href="/jishuwendang/class52/13617.html" title="详解vue axios用post提交的数据格式" target="_blank">详解vue axios用post提交的数据格式</a></li>
<li>• <a href="/jishuwendang/class52/13616.html" title="详解vue axios二次封装" target="_blank">详解vue axios二次封装</a></li>
<li>• <a href="/jishuwendang/class52/13615.html" title="详解redis在nodejs中的应用" target="_blank">详解redis在nodejs中的应用</a></li>
<li>• <a href="/jishuwendang/class52/13614.html" title="详解React中setState回调函数" target="_blank">详解React中setState回调函数</a></li>
<li>• <a href="/jishuwendang/class52/13613.html" title="详解React之父子组件传递和其它一些要点" target="_blank">详解React之父子组件传递和其它一些要点</a></li>
<li>• <a href="/jishuwendang/class52/13612.html" title="详解React-Router中Url参数改变页面不刷新的解决办法" target="_blank">详解React-Router中Url参数改变页面不刷新的解决办法</a></li>
<li>• <a href="/jishuwendang/class52/13611.html" title="详解react-redux插件入门" target="_blank">详解react-redux插件入门</a></li>
<li>• <a href="/jishuwendang/class52/13610.html" title="详解React+Koa实现服务端渲染(SSR)" target="_blank">详解React+Koa实现服务端渲染(SSR)</a></li>
<li>• <a href="/jishuwendang/class52/13609.html" title="详解React Native 屏幕适配（炒鸡简单的方法）" target="_blank">详解React Native 屏幕适配（炒鸡简单的方法）</a></li>
				</ul>
				</div>
			</div>
			
</div>

Copyright © 2024 <a href="http://www.zwyuanma.com/">中文源码网</a>  All Rights Reserved  备案号:<a href="http://www.beian.miit.gov.cn/" target="_blank">[苏ICP备15047094号-4]</a> <a href="/sitemap.xml">[站点地图]</a><br/>

<a href="/home/help/{$.id}.html" target="_blank">联系我们</a> | 
<a href="/home/help/{$.id}.html" target="_blank">常见问题</a> | 
<a href="/home/help/{$.id}.html" target="_blank">网站介绍</a> |

客服QQ:<a href="http://wpa.qq.com/msgrd?v=3&uin=282898506&site=qq&menu=yes" target="_blank">282898506</a> | 邮箱：282898506#qq.com(#改@)  <br>

<a href="/home/help/{$.id}.html" target="_blank">如何发布官方评测?</a> | 
<a href="/home/help/{$.id}.html" target="_blank">如何发布建站方案?</a> | 
<a href="/home/help/{$.id}.html" target="_blank">如何发布技术供求?</a> | 
<a href="/home/help/{$.id}.html" target="_blank">广告位申请</a> | 
<a href="/home/help/{$.id}.html" target="_blank">如何管理展厅?</a> | 
<a href="/home/help/{$.id}.html" target="_blank">如何开通展厅?</a> | 
<a href="/home/help/{$.id}.html" target="_blank">如何发布模版?</a> | 
<a href="/home/help/{$.id}.html" target="_blank">如何发布源码?</a> | 
<br/>

<div style="display:none;"><script charset='UTF-8' id='LA_COLLECT' src='//sdk.51.la/js-sdk-pro.min.js'></script><script>LA.init({id: 'Jhcp3j9uNE3jSacI',ck: 'Jhcp3j9uNE3jSacI'})</script> <a href="sitemap.xml">sitemap.xml</a></div>
</div></div>
</div>
</div>

<ul class="r_serve">
    <a title="qq咨询" onclick="window.open('http://wpa.qq.com/msgrd?v=3&uin=282898506&site=qq&menu=yes', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');return false;" target="_blank"><li><p><img src="/public/yuanma/web/style/images/qq.png" /></p><p>QQ客服</p></li></a>
    <li><p><img src="/public/yuanma/web/style/images/wx.png"/></p><p>公众号</p><img class="maImg" id="wxImg" src="/public/yuanma/web/style/images/wxImg.png"/></li>
    <li><a title="中文源码网手机版" target="_blank" href="http://m.zwyuanma.com/"><p><img src="/public/yuanma/web/style/images/ma.png"/></p><p>手机版</p></a><img class="maImg" id="maImg" src="/public/yuanma/web/style/images/maimg.png"/></li>
    <a title="" target="_blank" href="/help/2.html"><li><p><img src="/public/yuanma/web/style/images/help.png"/></p><p>帮助中心</p></li></a>
    <li><p><img src="/public/yuanma/web/style/images/back_top.png"/></p></li>
</ul>
<script language="javascript">
$(".r_serve li:nth-child(2)").hover(function() {$("#wxImg").show();$("#maImg").hide();},function(){$("#wxImg").hide();})
$(".r_serve li:nth-child(3)").hover(function() {$("#maImg").show();$(".r_gfq").hide();$("#wxImg").hide();},function(){$("#maImg").hide();})
$(".r_serve li:nth-child(5)").click(function() {$("html, body").animate({ scrollTop: 0 }, 120);})
</script>
</body>
</html>

点击排行

您现在的位置：首页 > 技术文档 > js框架/js库

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