中文源码网
欢迎您！
会员登录
会员注册
发布自媒体
发布模版
发布源码
发布模版
发布酷站
推荐源码
常用源码
帮助中心
栏目导航
热门搜索：
网站首页
免费源码
精品源码
html模版
精品模版
酷站大全
技术文档
方案大全
网络教程
站长自媒体
新闻动态
帮助中心
免费源码下载
asp源码
php源码
python源码
.net源码
jsp源码
JS特效
安卓源码
IOS源码
微信小程序下载
毕业设计源码下载
模版下载
商城模版
手机wap模版
网络教程
html5教程
asp教程
php教程
jsp教程
Python语言技术文档
python入门
Python编程技巧
Python网站web
Python网络爬虫
Python自动化运维
数据挖掘/机器学习
Python人工智能
Python多媒体
Python科学计算
Python游戏开发
Python图形界面
Python数据库相关
Python与其他语言
Python库/模块大全
Python报错处理大全
微信小程序技术文档
微信小程序开发入门
微信小程序开发技巧
微信游戏开发
微信公众号开发
微信常用源码
php语言技术文档
php入门教程
php技巧
php函数/类库
php框架
php+AJAX技巧
开源系统及二次开发
PHP内核
jsp语言技术文档
jsp入门教程
jsp技巧
jsp框架
asp语言技术文档
asp入门教程
asp技巧
asp函数/类库
C#/.NET语言技术文档
C#/.NET入门教程
C#/.NET技巧
MVC/.NET框架
C#/.NET微信开发
程序报错解决方法
html5/css技术文档
html5
CSS
javascript
javascript技巧
jquery
json
ajax
js框架/js库
点击排行
总结PHP中初始化空数组的最佳方法
在PHP中输出JS语句以及乱码问题的解决方案
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
用PHP的反射实现委托模式的讲解
详解提高使用Java反射的效率方法
详解关于php的xdebug配置(编辑器vscode)
详解php中生成标准uuid（guid）的方法
详解php中curl返回false的解决办法
详解php用static方法的原因
详解php伪造Referer请求反盗链资源
详解PHP素材图片上传、下载功能
详解PHP实现支付宝小程序用户授权的工具类
详解PHP神奇又有用的Trait
详解PHP队列的实现
详解PHP的抽象类和抽象方法以及接口总结
您现在的位置：
首页
>
技术文档
>
js框架/js库
我要投稿
vue中v-model的应用及使用详解
来源：
中文源码网
浏览：161 次 日期：2024-05-16 22:35:42
【下载文档:
vue中v-model的应用及使用详解.txt
】
vue中v-model的应用及使用详解
vue中经常使用到
和
这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。<br/>v-model本质上是一个语法糖。如下代码<input v-model="test">本质上是<input :value="test" @input="test = $event.target.value">，其中@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入到input，下面代码是v-model的一个简单的例子。在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。可以在如下div中加入<p>{{ test}}</p>获取input数据，然后去修改input中数据会发现<p></p>中数据随之改变。<br/><div id="app"><br/><input v-model="test"><br/><!-- <input :value="test" @input="test= $event.target.value"> --><!--语法糖--><br/></div><br/><script src="/resources/js/vue.js"></script><br/><script><br/>new Vue({<br/>el: '#app',<br/>data: {<br/>test: '这是一个测试'<br/>}<br/>});<br/></script><br/>1.v-model在input的下拉框、单选按钮、复选框中的应用<br/>如下面代码，分别是v-model在input不同的组件中的应用，但是大体用法相同。注意：像下面代码中复选框这样需要接收多条数据的情况下，在data里面应该由数组与其对应二不是字符串。<br/>这里有一个值绑定的问题，不管是下拉框或者单选按钮还是复选框，我们都可以在对应的标签内设置value。以下拉框为例，我们在<option>中添加了vulue=“A被选”，当我们选择第一个下拉框A的时候，在selected中的字符串为‘A被选'，如果我们不在<option>中设置value值的话那么selected中的字符串将是<option>中的值‘A'。<br/>这里还有一个和vue无关的问题，比较简单，但是由于平时主要做后台java开发没太注意这个前端问题。以下面的单选按钮代码为例，<label>标签内有一个for元素与input中的id值对应(两个值相同)，刚开始不太理解为什么这么写，这个对前端人员来说应该是一个很简单的问题。这样写的目的没有其它任何作用，只是label元素为鼠标改进了可用性，在点击label的时候也相当于点击了对应的input控件，点击label标签也可以触发input标签控件。例如单选按钮在加了for之后点击small也可以选择对应按钮，但是如果不加for是没有任何反应的。<br/><!--下拉框--><br/><div id="app"><br/><select v-model="selected"><br/><option value="A被选">A</option><br/><option value="B被选">B</option><br/><option value="C被选">C</option><br/></select><br/><span>Selected: {{ selected }}</span><br/></div><br/><script src="/resources/js/vue.js"></script><br/><script><br/>new Vue({<br/>el: '#app',<br/>data: {<br/>selected: ''<br/>}<br/>});<br/></script><br/><!--单选按钮--><br/><div id="app"><br/><input type="radio" id="small" value="small_value" v-model="picked"><br/><label for="small">small</label><br/><br><br/><input type="radio" id="big" value="big_value" v-model="picked"><br/><label for="big">big</label><br/><br><br/><span>Picked: {{ picked }}</span><br/></div><br/><script src="/resources/js/vue.js"></script><br/><script><br/>new Vue({<br/>el: '#app',<br/>data: {<br/>picked: ''<br/>}<br/>})<br/></script><br/><!--复选框--><br/><div id="app"><br/><input type="checkbox" id="one" value="value_one" v-model.lazy="checkedNames"><br/><label for="one">选项一</label><br/><input type="checkbox" id="two" value="value_two" v-model.lazy="checkedNames"><br/><label for="two">选项二</label><br/><input type="checkbox" id="three" value="value_three" v-model.lazy="checkedNames"><br/><label for="three">选项三</label><br/><br><br/><span>Checked names: {{ checkedNames }}</span><br/></div><br/><script src="/resources/js/vue.js"></script><br/><script><br/>new Vue({<br/>el: '#app',<br/>data: {<br/>checkedNames: []<br/>}<br/>})<br/></script><br/>2.v-model修饰符<br/>v-model也可以和.lazy、.trim和.number这些修饰符一起使用。<br/><!-- 在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件进行同步 --><br/><input v-model.lazy="msg" ><br/><!--去除字符串首尾的空格--><br/><input v-model.trim="msg"><br/><!--将数据转化为值类型--><br/><input v-model.number="age" type="number"><br/>.trim和.number的用法比较简单，这里就不做过多解释。.lazy相当于一个延迟加载的过程。在上面我们讲过<input v-model="test">相当于一个语法糖<input :value="test" @input="test = $event.target.value">，而<input v-model.lazy="msg" >则相当将input的实时更新改为一个change事件，v-model.lazy只有当焦点移除input时才会触发事件。下图1位v-model效果，图2位v-model.lazy效果。<br/>下面在单独给大家介绍下vue中v-model使用<br/>v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：<br/> 1. v-bind绑定一个value属性<br/> 2. v-on指令给当前元素绑定input事件<br/>自定义组件使用v-model，应该有以下操作：<br/>1. 接收一个value prop<br/>2. 触发input事件，并传入新值<br/>在原生表单元素中：<br/><input v-model="inputValue"><br/>相当于<br/><input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value"><br/>在自定义组件中<br/><my-component v-model="inputValue"></my-component><br/>相当于<br/><my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component><br/>这个时候，inputValue接受的值就是input事件的回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还需要$emit去触发input的事件。<br/>this.$emit('input', value)<br/>总结<br/>以上所述是小编给大家介绍的vue中v-model的应用及使用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对中文源码网网站的支持！ <!--#include file="web/createerweima.jishuwendang.asp"--> </div> <div class=powered> <dt class="title-link"> <p><b>上一篇：</b><a href='/jishuwendang/class52/13349.html'>vue中倒计时组件的实例代码</a></p> <p><b>下一篇：</b><a href='/jishuwendang/class52/13347.html'>vue中vee validate表单校验的几种基本使用</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 style="float:left;margin:10px;padding:10px 0px;"> <script src="/file/js/jishuwendangdetails.right.tuijian.js"></script> </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> <div id="footer"> <div class="footer_con"><div class="footer_txt"> 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>
