Vue.js学习笔记之修饰符详解

本篇将简单介绍常用的修饰符。

在上一篇中，介绍了 v-model 和 v-on 简单用法。除了常规用法，这些指令也支持特殊方式绑定方法，以修饰符的方式实现。通常都是在指令后面用小数点“.”连接修饰符名称。

一、v-model的修饰符

v-model 是用于在表单表单元素上创建双向数据绑定的指令。在 和 上，默认通过监听元素的 input 事件来更新绑定的属性值。</p> <p>为了能明显的看到绑定属性值的变化，需要在Chrome浏览器中安装Vue Devtools扩展程序。当查看Vue开发的页面时，按F12就可以在开发者工具里看到Vue页签。这里需要注意，只有在引用Vue的开发版本文件，即vue.js文件时，Vue Devtools工具才能正常使用。</p> <p><h3>.lazy</h3></p> <p>首先在 <code>vm </code>对象中增加需要绑定的属性</p> <div class="jb51code"> <pre class="brush:js;"> var vm = new Vue({ el: "#app",data: { input_lazy: "" } }); </pre> </div> <p>在页面中的 input 的元素上添加指令</p> <div class="jb51code"> <pre class="brush:xhtml;"> <div class="row"> <h2>v-model.lazy</h2> <input type="text" v-model.lazy="input_lazy" /> </div></pre> </div> <p>打开页面，开启Vue Devtools，在文本框中输入字符，查看属性值变化</p> <p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201707/2017072515213331.png" alt="" /></p></p> <p>当在文本框输入内容，并且光标焦点没有离开文本框时，属性值没有实时发生变化</p> <p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201707/2017072515213332.png" alt="" /></p></p> <p>而当焦点离开文本框时，属性值发生了变化并与文本框内容保持一致。从这个例子可以看出<code> .lazy </code>修饰符延迟了同步更新属性值的时机。即将原本绑定在<code> input </code>事件的同步逻辑转变为绑定在 <code>change </code>事件上。</p> <p><h3>.number</h3></p> <p>该修饰符用来将输入内容自动转换成数值。</p> <p>在 <code>vm </code>对象里增加一个属性，默认为空字符串</p> <div class="jb51code"> <pre class="brush:js;"> var vm = new Vue({ el: "#app",data: { input_number: "" } }); </pre> </div> <p>在页面的 input 元素上添加指令</p> <div class="jb51code"> <pre class="brush:xhtml;"> <div class="row"> <h2>v-model.number</h2> <input type="text" v-model.number="input_number" /> <hr /> </div> </pre> </div> <p>打开页面，在文本框内输入内容，查看绑定属性值的变化</p> <p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201707/2017072515213433.png" alt="" /></p></p> <p>当开始输入数字时，属性值将实时更新成Number类型的数值。数字后输入其他非数字的字符，属性值将不再变化。</p> <p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201707/2017072515213434.png" alt="" /></p></p> <p>而当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值，所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。</p> <p><h3>.trim</h3></p> <p>该修饰符用来自动过滤字符串前后的空字符。</p> <p>在 <code>vm </code>对象中增加一个属性，默认为空字符串</p> <div class="jb51code"> <pre class="brush:js;"> var vm = new Vue({ el: "#app",data: { input_trim: "" } });</pre> </div> <p>在<code> input </code>上添加指令</p> <div class="jb51code"> <pre class="brush:xhtml;"> <div class="row"> <h2>v-model.trim</h2> <input type="text" v-model.trim="input_trim" /> <hr /> </div> </pre> </div> <p>打开页面，在文本框输入内容，并在内容前后添加多个空格</p> <p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201707/2017072515213435.png" alt="" /></p></p> <p>Vue会自动过滤掉前后的多个空格，最终属性值是前后没有空字符的字符串。</p> <p><h3>二、v-on的修饰符</h3></p> <p>绑定的事件修饰符可以改变事件的触发方式。</p> <p><h3>.stop</h3></p> <p>该修饰符将阻止事件向上冒泡。同理于调用 <code>event.stopPropagation() </code>方法</p> <p>在<code> vm </code>对象里添加两个事件</p> <div class="jb51code"> <pre class="brush:js;"> var vm = new Vue({ el: "#app",methods: { div_click: function () { console.log("div click..."); },stop_click: function () { console.log("stop_click..."); } } }); </pre> </div> <p>将上面两个方法绑定到一组具有父子关系的元素上</p> <div class="jb51code"> <pre class="brush:xhtml;"> <div class="row"> <h2>v-on.stop</h2> <div @click="div_click"> <button type="button" @click.stop="stop_click">StopPropagation</button> </div> <hr /> </div></pre> </div> <p>打开页面，并点击按钮，查看控制台打印结果</p> <p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201707/2017072515213436.png" alt="" /></p></p> <p>按照事件冒泡原理，点击按钮时，从当前触发的元素开始，沿着它的父元素一直到根元素，都会依次触发 click 事件。但是应用了 .stop 修饰符后，将只会触发当前元素的 click 事件，并阻止事件向上冒泡。</p> <p><h3>.prevent</h3></p> <p>该修饰符会阻止当前事件的默认行为。同理于调用<code> event.preventDefault() </code>方法</p> <p>在<code> vm </code>对象里添加一个测试方法</p> <div class="jb51code"> <pre class="brush:js;"> var vm = new Vue({ el: "#app",methods: { form_submit: function () { console.log("form submit!"); } } });</pre> </div> <p>页面添加一个 form 表单，并绑定表单的提交事件</p> <div class="jb51code"> <pre class="brush:xhtml;"> <div class="row"> <h2>v-on.prevent</h2> <form @submit.prevent="form_submit"> <button type="submit">Submit</button> </form> <hr /> </div> </pre> </div> <p>当点击提交按钮时，会触发绑定的事件，并且阻止表单提交并刷新当前页面的默认行为。</p> <p><h3>.self</h3></p> <p>该指令只当事件是从事件绑定的元素本身触发时才触发回调</p> <p>修改上面<code> .stop </code>的例子，在父元素 <code>div </code>上添加样式</p> <div class="jb51code"> <pre class="brush:xhtml;"> <div class="row"> <h2>v-on.self</h2> <div @click.self="div_click" style="display:inline-block; width: px; background-color:red;"> <button type="button" @click="stop_click">Button</button> </div> <hr /> </div></pre> </div> <p>打开页面</p> <p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201707/2017072515213437.png" alt="" /></p></p> <p>因为父元素比它的子元素要长，所以右侧会有一部分红色的父元素显示出来。分别点击按钮和红色区域，查看控制台打印结果</p> <p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201707/2017072515213438.png" alt="" /></p></p> <p>因为 div_click 事件被修饰符绑定，只有在直接点击到父元素 div ，即红色区域内，事件才会被触发。</p> <p>即使点击了它的子元素触发了子元素的事件，按照事件冒泡原理，父元素的事件应当被触发，但是因为事件的触发源并不是事件绑定的元素本身，所以父元素事件不会被触发。</p> <p><h3>.one</h3></p> <p>该修饰符表示绑定的事件只会被触发一次</p> <p>在<code> vm </code>对象中添加一个测试方法 </p> <div class="jb51code"> <pre class="brush:js;"> var vm = new Vue({ el: "#app",methods: { once_click: function () { console.log("once click..."); } } }); </pre> </div> <p>页面添加一个按钮，绑定事件</p> <div class="jb51code"> <pre class="brush:xhtml;"> <div class="row"> <h2>v-on.once</h2> <button type="button" @click.once="once_click">Button</button> <hr /> </div></pre> </div> <p>打开页面，多次点击按钮。只有在第一次点击时，事件才会触发。</p> <p><h3>键值修饰符</h3></p> <p>该修饰符可以用来监听键盘事件</p> <p>在<code> vm </code>对象中添加一个测试方法</p> <div class="jb51code"> <pre class="brush:js;"> var vm = new Vue({ el: "#app",methods: { enter_click: function () { console.log("enter click..."); } } }); </pre> </div> <p>页面增加一个 input 元素，监听键盘事件</p> <div class="jb51code"> <pre class="brush:xhtml;"> <div class="row"> <h2>键值修饰符</h2> <input type="text" @keyup.="enter_click" /> <hr /> </div></pre> </div> <p>打开页面，在文本框输入内容，并按回车，查看控制台打印结果</p> <p style="text-align: center"><p class="pic_center"><img src="https://files.jb51.cc/file_images/article/201707/2017072515213439.png" alt="" /></p></p> <p>通过 keyup.keyCode 的方式来监听键盘特定按键的事件。也可以通过按键名称来监听</p> <div class="jb51code"> <pre class="brush:xhtml;"> <input type="text" @keyup.enter="enter_click"/> </pre> </div> <p>也可以自定义按键名称</p> <div class="jb51code"> <pre class="brush:js;"> // 自定义按键名称 Vue.config.keyCodes.ent = 13; <p>// 页面引用<br /> <input type="text" @keyup.ent="enter_click"/></pre></p> </div> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。</p><p class="text-muted" style="margin-top:20px;">版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。</p> </div><div class="topcard-tags"><a href="https://www.jb51.cc/tag/vuejs/" class="tag_link" target="_blank">vuejs</a><a href="https://www.jb51.cc/tag/xiushifu/" class="tag_link" target="_blank">修饰符</a><a href="https://www.jb51.cc/tag/xiushifuxiangjie/" class="tag_link" target="_blank">修饰符详解</a></div></div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <h3>相关推荐</h3> <hr /> <div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4758425.html" title="Vuex- Action的 { commit }的写法">Vuex- Action的 { commit }的写法</a></div> <div class="summary">https://segmentfault.com/a/1190000022018995 https://www.jianshu.com/p/8c3599dda094 vuex教程中，有这样一句话和这样一段代码： 实践中，我们会经常用到 ES2015 的参数解构来简化代码（特别是我们需要调用commi</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4758424.html" title="ES6模块之export和import详解">ES6模块之export和import详解</a></div> <div class="summary">ES6 （ECMAScript 6）中的模块是一个包含 JavaScript 代码的文件，在这个模块中所有的变量都对其他模块是不可见的，除非我们导出它。 ES6的模块系统大致分为导出（export）和导入（import）两个模块。 1、模块导出（export） 可以 导出 所有的最外层 函数 、 类</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4758423.html" title="Vue知识点汇总（含Vue3）">Vue知识点汇总（含Vue3）</a></div> <div class="summary">from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ Vue知识点汇总（含Vue3） 一、Vue 基础 1. Vue的基本原理 当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4758422.html" title="npm init vite@latest vue3study --template vue">npm init vite@latest vue3study --template vue</a></div> <div class="summary">D:\Temp&gt;npm init vite@latest vue3study --template vuenpm ERR! code ETIMEDOUTnpm ERR! errno ETIMEDOUTnpm ERR! network request to https://registry.np</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4747370.html" title="Vue 中使用消息总线让两个滚动条同步滚动">Vue 中使用消息总线让两个滚动条同步滚动</a></div> <div class="summary">文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组件的滚动条同步滚动这就涉及到子组件之间的互相通信，通过 消息总线可以达到我们的需求 ,首先建立一个标志位，拖动左边滚动条的时候，右边的滚动条事件不处理，反之拖动右边滚动条时，左边的滚动条事件不做处理，建立一个公共的变量用于两者的互斥store.jsimport Vue from 'vue'export let store = Vue.observable({ scrollFlag: true})export let mutations =.._vue 能不能同时有两个滚动事件</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4747369.html" title="Vue + lodop 静默打印">Vue + lodop 静默打印</a></div> <div class="summary">文章浏览阅读3.3k次，点赞3次，收藏16次。静默打印是什么？简单来说就是不需要用户点击"打印"，自动去打印，但是使用浏览器web打印不可避免的要弹出以下画面面对这种问题也只能用"富客户端"技术来解决，在浏览器的沙盒安全模型中无法做到，那么只能使用插件的技术，这个我们就不自己花力气去做了，我找来了 lodop 这个免费的打印组件，功能还是挺强大的，下载下图的发行包解压后安装下图两个exe如果你的系统是64位的，可以安装install_lodop64.exe上图的LodopFuncs.js 是客户端要使用的核心库文件..._this.$getlodop().then((lodop) =>{</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4747368.html" title="Vue + DataV + SignalR 数字化大屏展示">Vue + DataV + SignalR 数字化大屏展示</a></div> <div class="summary">文章浏览阅读1.7k次。个人觉得大屏展示其实很简单，噱头多过技术含量，下面使用了 DataV (不是阿里的那个DataV哈，具体链接在这里)开发了一个大屏展示，使用了css flex弹性布局，使用了DataV的一些比较酷炫的边框(SVG写的)，基本上功能没有全部完成，但是模子已经刻出来了，只是后端推送的内容没有全部写出来前端<template> <dv-full-screen-container class="screen-container"> <div class="ti_用signalr做一个简单的实时大屏显示</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4747367.html" title="vue 下使用 exceljs + x-spreadsheet 带样式导入Excel">vue 下使用 exceljs + x-spreadsheet 带样式导入Excel</a></div> <div class="summary">文章浏览阅读3.4k次，点赞3次，收藏10次。【说明】导入的Excel 字体颜色和背景色只能识别【标准色】,别的如"主题颜色"，exceljs 解析出来不是颜色值。导入的样式包括字体，字号，列宽，合并单元格，【部分能识别】的背景色，文字颜色。导入到 x-data-spreadsheet 如下图。原Excel样式如下。_x-data-spreadsheet</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4747366.html" title="element ui 的 el-tab 当使用 router-view 时 mounted 执行了多次">element ui 的 el-tab 当使用 router-view 时 mounted 执行了多次</a></div> <div class="summary">文章浏览阅读1.7k次。之前参考某文章把 router-view 放在 el-tab-pane 外面都不起作用，问题根本不是出在 el-tab-pane，而是v-for 里面有多个route-view , keep-alive 时 tab 并未销毁掉，而是缓存隐藏了起来。需要把 router-view 的 name 与路由的 index.js 名称对应起来。之前参照很多文章修改试图修正这个问题，结果都徒劳，终于让我找到。我做了如下修改，主页面 main.vue。_el-tab-pane 后面接router-view</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4747365.html" title="解决npm下载包的时候发生的依赖冲突">解决npm下载包的时候发生的依赖冲突</a></div> <div class="summary">文章浏览阅读533次。今天在一台虚拟机上面运行老项目，报各种类型上图的错误提示，一开始还以为是less的问题，结果一个个装完还是报错，后面又说webpack, webpack cli有问题，头有点大了，google 一下，发现一个命令。讨论这个命令的文章，可以了解一下。运行以后终于出现了期待已久的。_npm install 忽略依赖</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4747364.html" title="Vue2.0 组件实现动态模板(即Template)">Vue2.0 组件实现动态模板(即Template)</a></div> <div class="summary">文章浏览阅读8k次，点赞3次，收藏12次。从这篇文章得到启发先定义一个组件从外部接收Template，然后在组件里调用<template > <div ref="markedContent"></div></template><script>import Vue from 'vue/dist/vue.esm.js'export default { name: 'wf-marked-content', props: ['content'], mounte.._vue components 动态传入模板</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4747363.html" title="Vue中使用froala富文本编辑器制作打印模板 + print.js 打印">Vue中使用froala富文本编辑器制作打印模板 + print.js 打印</a></div> <div class="summary">文章浏览阅读5.4k次。参考上一篇知识开发的一个功能，制作一个打印模板的管理模块，如下(就是保存froala编辑后的html文本，其中包括Vue的Template，这样我们可以利用Vue的模板的优势来动态绑定一些数据源进行HTML的打印,基本上跟过去水晶报表做一个模板再绑定数据源的方法异曲同工)在 main.js 里引用 froala 组件// Import and use Vue Froala lib.import VueFroala from 'vue-froala-wysiwyg'// 引入 Fr.._vue设计网页打印模板</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4747362.html" title="Vue3 使用 script-setup 语法糖">Vue3 使用 script-setup 语法糖</a></div> <div class="summary">文章浏览阅读992次。计划是这样,公司的项目一直在持续改动,安装包总是需要频繁生成新的,由此我想到了"持续集成"!有自动化工具不用,岂不可惜?这周的主要时间就用来学习CruiseControl.Net全面实现持续集成_怎么在vue的 script部分使用 eldigloa</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4747361.html" title="拿来改造主义，Vue + Element UI + Less 做了一个拖拽条">拿来改造主义，Vue + Element UI + Less 做了一个拖拽条</a></div> <div class="summary">文章浏览阅读1.2k次。其实Element UI 只用了文字提示的 el-tooltip 组件，不喜欢可以去掉，不记得是从哪拿到的原始代码，我给加了高亮渐变显示，图标，和拖拽时只能拖拽图标的位置，效果如上图，可以水平方向拖动，也可以垂直方向拖动。样式是less写的，css写嵌套样式太繁琐了。拿来主义，改造有理!下面贴代码<template> <div ref="splitPane" class="split-pane" :class="direction" :"{ fl..._element ui拉条样式</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4747360.html" title="vue 下使用 exceljs + x-spreadsheet 带样式导出Excel">vue 下使用 exceljs + x-spreadsheet 带样式导出Excel</a></div> <div class="summary">文章浏览阅读953次，点赞2次，收藏2次。接上一篇，这次加入的是从x-speadsheet导出Excel，并且带有x-speadsheet中的样式，重点关注 exportExcel 这个方法，我加入了 tinycolor 这个库用来翻译颜色值，值得注意的是， exceljs的颜色值是 argb 不是 rgba，一定不要弄混了a 是代表的透明度放在最前面_x-data-spreadsheet 导出</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4747359.html" title="Vue 动态连接线">Vue 动态连接线</a></div> <div class="summary">文章浏览阅读5.5k次，点赞2次，收藏21次。尝试了两个连线库 jsplumb 和 leadline ，其实两个库都很强大，但是基于个人使用的习惯，决定还是用 leadline ，在Vue 下我使用它的一个包装库 leader-line-vue 下面是上图的连接线示例代码，连接线很轻松的就实现了一个渐变效果..._vue 连线</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4747358.html" title="安装 Element UI 3.0 （即 Element UI Plus） 正确方法">安装 Element UI 3.0 （即 Element UI Plus） 正确方法</a></div> <div class="summary">文章浏览阅读4.2k次，点赞2次，收藏5次。首先官网推荐的安装方法没有生成dist文件，导致样式表等这些文件并没有生成npm install element-plus --save以上方法是有问题的，如果不幸执行了上面的命令，那么先执行卸载npm uninstall element-plus删除 main.js文件对element ui的引用，输入以下命令vue add element-plus..._elementui3.0</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4747357.html" title="Vue + Element UI 实现了一个周选择器">Vue + Element UI 实现了一个周选择器</a></div> <div class="summary">文章浏览阅读3.1k次。如上图，下面贴代码<template> <div> <el-date-picker size="large" style ="width:120px" v-model="selectYear" format="yyyy 年" value-format="yyyy" type="year" :clearable = "false" placeholder="选择年">.._vue多选周</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4747356.html" title="自己开发的 Vue 下的甘特图 组件 已上传到GitHub上">自己开发的 Vue 下的甘特图 组件 已上传到GitHub上</a></div> <div class="summary">文章浏览阅读1.8k次，点赞6次，收藏6次。经过 2021年的一个春节，从年前到现在，大致撸出一个 甘特图，进度条是用SVG画的，使用了几个工具库 （interactjs 用来处理拖拽和修改尺寸，snap.svg 用来处理 svg 的dom 操作，moment.js用来处理时间的操作），其他没有依赖任何的UI组件，目前初见雏形，还比较粗糙，后面会不断更新源码地址点击期间也摸索了怎么把vs code的项目上传到 GitHub 上面进行源代码的管理，基本上是参考的这篇文章做的..._vue gantt demo</div> </div><div class="list_con"> <div class="title"><a href="https://www.jb51.cc/vue/4747355.html" title="封装 x-spreadsheet 带样式导入导出">封装 x-spreadsheet 带样式导入导出</a></div> <div class="summary">文章浏览阅读2.1k次。接上两篇vue 下使用 exceljs + x-spreadsheet 带样式导入Excelvue 下使用 exceljs + x-spreadsheet 带样式导出Excel下面封装好一个组件调用组件的页面效果如图，目前“导出Json”还没有做_x-spreadsheet导入导出</div> </div></div> </div> </div> </div> <div class="col-sm-12 col-md-12 col-lg-3"> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <!-- jb51-article-300x600 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7541177540"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <!-- row end --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门文章</label> <ul class="n-list"><li><a href="https://www.jb51.cc/vue/4758425.html" title="Vuex- Action的 { commit }的写法">• Vuex- Action的 { commit }的写法</a></li><li><a href="https://www.jb51.cc/vue/4758424.html" title="ES6模块之export和import详解">• ES6模块之export和import详解</a></li><li><a href="https://www.jb51.cc/vue/4758423.html" title="Vue知识点汇总（含Vue3）">• Vue知识点汇总（含Vue3）</a></li><li><a href="https://www.jb51.cc/vue/4758422.html" title="npm init vite@latest vue3study --template vue">• npm init vite@latest vue3study --tem…</a></li><li><a href="https://www.jb51.cc/vue/4747370.html" title="Vue 中使用消息总线让两个滚动条同步滚动">• Vue 中使用消息总线让两个滚动条同步滚…</a></li><li><a href="https://www.jb51.cc/vue/4747369.html" title="Vue + lodop 静默打印">• Vue + lodop 静默打印</a></li><li><a href="https://www.jb51.cc/vue/4747368.html" title="Vue + DataV + SignalR 数字化大屏展示">• Vue + DataV + SignalR 数字化大屏展示</a></li><li><a href="https://www.jb51.cc/vue/4747367.html" title="vue 下使用 exceljs + x-spreadsheet 带样式导入Excel">• vue 下使用 exceljs + x-spreadsheet 带…</a></li><li><a href="https://www.jb51.cc/vue/4747366.html" title="element ui 的 el-tab 当使用 router-view 时 mounted 执行了多次">• element ui 的 el-tab 当使用 router-v…</a></li><li><a href="https://www.jb51.cc/vue/4747365.html" title="解决npm下载包的时候发生的依赖冲突">• 解决npm下载包的时候发生的依赖冲突</a></li></ul> </div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">最新文章</label> <ul class="n-list"><li><a href="https://www.jb51.cc/vue/4758425.html" title="Vuex- Action的 { commit }的写法">• Vuex- Action的 { commit }的写法</a></li><li><a href="https://www.jb51.cc/vue/4758424.html" title="ES6模块之export和import详解">• ES6模块之export和import详解</a></li><li><a href="https://www.jb51.cc/vue/4758423.html" title="Vue知识点汇总（含Vue3）">• Vue知识点汇总（含Vue3）</a></li><li><a href="https://www.jb51.cc/vue/4758422.html" title="npm init vite@latest vue3study --template vue">• npm init vite@latest vue3study --tem…</a></li><li><a href="https://www.jb51.cc/vue/4747370.html" title="Vue 中使用消息总线让两个滚动条同步滚动">• Vue 中使用消息总线让两个滚动条同步滚…</a></li><li><a href="https://www.jb51.cc/vue/4747369.html" title="Vue + lodop 静默打印">• Vue + lodop 静默打印</a></li><li><a href="https://www.jb51.cc/vue/4747368.html" title="Vue + DataV + SignalR 数字化大屏展示">• Vue + DataV + SignalR 数字化大屏展示</a></li><li><a href="https://www.jb51.cc/vue/4747367.html" title="vue 下使用 exceljs + x-spreadsheet 带样式导入Excel">• vue 下使用 exceljs + x-spreadsheet 带…</a></li><li><a href="https://www.jb51.cc/vue/4747366.html" title="element ui 的 el-tab 当使用 router-view 时 mounted 执行了多次">• element ui 的 el-tab 当使用 router-v…</a></li><li><a href="https://www.jb51.cc/vue/4747365.html" title="解决npm下载包的时候发生的依赖冲突">• 解决npm下载包的时候发生的依赖冲突</a></li></ul> </div> </div> </div> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门标签<a href="https://www.jb51.cc/all" class="pull-right">更多</a> </label> <div class="topcard-tags"><a href="https://www.jb51.cc/tag/python/" title="python">python</a><a href="https://www.jb51.cc/tag/JavaScript/" title="JavaScript">JavaScript</a><a href="https://www.jb51.cc/tag/java/" title="java">java</a><a href="https://www.jb51.cc/tag/HTML/" title="HTML">HTML</a><a href="https://www.jb51.cc/tag/PHP/" title="PHP">PHP</a><a href="https://www.jb51.cc/tag/reactjs/" title="reactjs">reactjs</a><a href="https://www.jb51.cc/tag/C/" title="C#">C#</a><a href="https://www.jb51.cc/tag/Android/" title="Android">Android</a><a href="https://www.jb51.cc/tag/CSS/" title="CSS">CSS</a><a href="https://www.jb51.cc/tag/Nodejs/" title="Node.js">Node.js</a><a href="https://www.jb51.cc/tag/sql/" title="sql">sql</a><a href="https://www.jb51.cc/tag/rp/" title="r">r</a><a href="https://www.jb51.cc/tag/python3x/" title="python-3.x">python-3.x</a><a href="https://www.jb51.cc/tag/MysqL/" title="MysqL">MysqL</a><a href="https://www.jb51.cc/tag/jQuery/" title="jQuery">jQuery</a><a href="https://www.jb51.cc/tag/c4343/" title="c++">c++</a><a href="https://www.jb51.cc/tag/pandas/" title="pandas">pandas</a><a href="https://www.jb51.cc/tag/flutter/" title="Flutter">Flutter</a><a href="https://www.jb51.cc/tag/angular/" title="angular">angular</a><a href="https://www.jb51.cc/tag/IOS/" title="IOS">IOS</a><a href="https://www.jb51.cc/tag/django/" title="django">django</a><a href="https://www.jb51.cc/tag/linux/" title="linux">linux</a><a href="https://www.jb51.cc/tag/swift/" title="swift">swift</a><a href="https://www.jb51.cc/tag/typescript/" title="typescript">typescript</a><a href="https://www.jb51.cc/tag/luyouqi/" title="路由器">路由器</a><a href="https://www.jb51.cc/tag/JSON/" title="JSON">JSON</a><a href="https://www.jb51.cc/tag/luyouqishezhi/" title="路由器设置">路由器设置</a><a href="https://www.jb51.cc/tag/wuxianluyouqi/" title="无线路由器">无线路由器</a><a href="https://www.jb51.cc/tag/h3c/" title="h3c">h3c</a><a href="https://www.jb51.cc/tag/huasan/" title="华三">华三</a><a href="https://www.jb51.cc/tag/huasanluyouqishezhi/" title="华三路由器设置">华三路由器设置</a><a href="https://www.jb51.cc/tag/huasanluyouqi/" title="华三路由器">华三路由器</a><a href="https://www.jb51.cc/tag/diannaoruanjianjiaocheng/" title="电脑软件教程">电脑软件教程</a><a href="https://www.jb51.cc/tag/arrays/" title="arrays">arrays</a><a href="https://www.jb51.cc/tag/docker/" title="docker">docker</a><a href="https://www.jb51.cc/tag/ruanjiantuwenjiaocheng/" title="软件图文教程">软件图文教程</a><a href="https://www.jb51.cc/tag/C/" title="C">C</a><a href="https://www.jb51.cc/tag/vuejs/" title="vue.js">vue.js</a><a href="https://www.jb51.cc/tag/laravel/" title="laravel">laravel</a><a href="https://www.jb51.cc/tag/springboot/" title="spring-boot">spring-boot</a></div> </div> </div> </div> <div class="row row-sm rbox"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <!-- jb51-article-300x600 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-4605373693034661" data-ad-slot="7541177540"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> </div> </div> <footer id="footer"> <div class="container" style="width:1440px;"> <div class="row hidden-xs"> <div class="col-sm-12 col-md-9 col-lg-9 site-link"> <ul class="list-inline"> <li>友情链接:</li><li><a href="https://www.runoob.com/" title="菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。" target="_blank" rel="nofollow">菜鸟教程</a></li><li><a href="https://ai.jb51.cc/" title="ai导航是编程之家旗下ai方向的ai资讯、ai工具类集合导航站。" target="_blank" rel="nofollow">ai导航</a></li></ul> <ul class="list-inline"> <li><a href="https://www.jb51.cc" title="编程之家">编程之家</a></li>-<li><a href="https://t5m44pq3f7.jiandaoyun.com/f/638ca61b7b079a000a5d2dd6" rel="nofollow" title="我要投稿" target="_blank">我要投稿</a></li>-<li><a target="_blank" rel="nofollow" href="https://t5m44pq3f7.jiandaoyun.com/f/638ca8c69ad234000a79561f" title="广告合作">广告合作</a></li>-<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></li>-<li><a href="https://www.jb51.cc/disclaimers.html" title="免责声明">免责声明</a></li>-<li><a href="https://www.jb51.cc/sitemap/all/index.xml" title="网站地图" target="_blank">网站地图</a></li> </ul> <div>版权所有 © 2018编程之家<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a> </div> </div> <div class="col-sm-12 col-md-3 col-lg-3"><img src="https://www.jb51.cc/qrcode.jpg" width="90" alt="微信公众号搜索 “ 程序精选 ” ，选择关注！"> <div class="pull-right">微信公众号搜<span class="text-danger">"程序精选"</span>关注<br />微信扫一扫可直接关注哦！</div> </div> </div> </div> </footer> <script src="https://www.jb51.cc/js/count.js"></script> </body> </html>