<p><code></p> <h2 id="articleHeader0">前言</h2> <p>最近开发的页面以及功能大都以表格为主,接口获取来的 <code>JSON</code> 数据大都是需要经过处理,比如时间戳需要转换,或者状态码的转义。对于这样的问题,各大主流框架都提供了类似于过滤的方法,在 <code><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a></code> 中,一般是在页面上定义 <code>filter</code> 然后在模板文件中使用 <code>|</code> 进行处理。</p> <p>这种方法和以前的遍历<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>洗数据是方便了许多,但是,当我发现在许多的页面都有相同的 <code>filter</code> 的时候,每个页面都要复制一遍就显的很蛋疼,遂决定用 <code><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.mixin()</code> 实现<strong>一次代码,无限复用</strong>。</p> <p>最后,还可以将所有的 <code>filter</code> 包装成一个 <code>vue</code> 的插件,使用的时候调用 <code><a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>.use()</code> 即可,甚至可以上传 <code>npm</code> 包,开发不同的项目的时候可以直接 <code>install</code> 使用。(考虑到最近更新的比较快,遂打包上传这步骤先缓缓,等版本稍微稳定了之后来补全)</p> <h2 id="articleHeader1">正文</h2> <p>闲话说够,开始正题。</p> <h3 id="articleHeader2">Vue.mixin 为何物</h3> <p>学习一个新的框架或者 <code><a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a></code> 的时候,最好的途径就是上官网,这里附上 <a href="https://cn.vuejs.org/v2/guide/mixins.html#%E5%85%A8%E5%B1%80%E6%B7%B7%E5%85%A5" rel="nofollow noreferrer" target="_blank">Vue.mixin()</a> 官方说明。</p> <p>一句话解释,<code>Vue.mixin()</code> 可以把你创建的自定义方法混入<strong>所有的</strong> <code>Vue</code> 实例。</p> <p>示例代码</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="Vue.mixin({ created: function(){ console.log(&quot;success&quot;) } })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">Vue.mixin({ <span class="hljs-attr">created</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"success"</span>) } })</code></pre> <p>跑起你的项目,你会发现在控制台输出了一坨 <code>success</code>。</p> <p>效果出来了意思也就出来了,所有的 <code>Vue</code> 实例的 <code>created</code> 方法都被<strong>改成</strong>了我们自定义的方法。</p> <h3 id="articleHeader3">使用 Vue.mixin()</h3> <p>接下来的思路很简单,我们整合所有的 <code>filter</code> 函数到一个文件,在 <code>main.js</code> 中引入即可。</p> <p>在上代码之前打断一下,代码很简单,但是我们可以写的更加规范化,关于如何做到规范,在 <code>Vue</code> 的官网有比较详细的 <a href="https://cn.vuejs.org/v2/style-guide/#%E7%A7%81%E6%9C%89%E5%B1%9E%E6%80%A7%E5%90%8D-%E5%BF%85%E8%A6%81" rel="nofollow noreferrer" target="_blank">风格指南</a> 可以参考。</p> <p>因为我们的自定义方法会在所有的实例中混入,如果按照以前的方法,难免会有覆盖原先的方法的危险,按照官方的建议,混入的自定义方法名增加前缀 <code>$_</code> 用作区分。</p> <p>创建一个 <code>config.js</code> 文件,用于保存状态码对应的含义,将其暴露出去</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="export const typeConfig = { 1: &quot;type one&quot;, 2: &quot;type two&quot;, 3: &quot;type three&quot; }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> typeConfig = { <span class="hljs-number">1</span>: <span class="hljs-string">"type one"</span>, <span class="hljs-number">2</span>: <span class="hljs-string">"type two"</span>, <span class="hljs-number">3</span>: <span class="hljs-string">"type three"</span> }</code></pre> <p>再创建一个 <code>filters.js</code> 文件,用于保存所有的自定义函数</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import { typeConfig } from &quot;./config&quot; export default { filters: { $_filterType: (value) => {<br /> return typeConfig[value] || &quot;type undefined&quot;<br /> }<br /> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> { typeConfig } <span class="hljs-keyword">from</span> <span class="hljs-string">"./config"</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">filters</span>: { <span class="hljs-attr">$_filterType</span>: <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> { <span class="hljs-keyword">return</span> typeConfig[value] || <span class="hljs-string">"type undefined"</span> } } }</code></pre> <p>最后,在 <code>main.js</code> 中引入我们的 <code>filters</code> 方法集</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import filter from &quot;./filters&quot; Vue.mixin(filter)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> filter <span class="hljs-keyword">from</span> <span class="hljs-string">"./filters"</span> Vue.mixin(filter)</code></pre> <p>接下来,我们就可以在 <code>.vue</code> 的模板文件中随意使用自定义函数了</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div>{{typeStatus | $_filterType}}</p> <div> </template>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">&lt;template&gt; <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span>{{typeStatus | $_filterType}}<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span></span></code></pre> <h3 id="articleHeader4">包装插件</h3> <p>接下来简单应用一下 <code>Vue</code> 中插件的制作方法。创建插件之后,就可以 <code>Vue.use(myPlugin)</code> 来使用了。</p> <p>首先附上插件的 <a href="https://cn.vuejs.org/v2/guide/plugins.html" rel="nofollow noreferrer" target="_blank">官方文档</a>。</p> <p>一句话解释,包装的插件需要一个 <code>install</code> 的方法将插件装载到 <code>Vue</code> 上。</p> <p>关于 <code>Vue.use()</code> 的源码</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="function initUse (Vue) { Vue.use = function (plugin) { var installedPlugins = (this._installedPlugins || (this._installedPlugins = [])); if (installedPlugins.indexOf(plugin) > -1) {<br /> return this<br /> }</p> <p> // additional parameters<br /> var args = toArray(arguments, 1);<br /> args.unshift(this);<br /> if (typeof plugin.install === 'function') {<br /> plugin.install.apply(plugin, args);<br /> } else if (typeof plugin === 'function') {<br /> plugin.apply(null, args);<br /> }<br /> installedPlugins.push(plugin);<br /> return this<br /> };<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">initUse</span> (<span class="hljs-params">Vue</span>) </span>{ Vue.use = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">plugin</span>) </span>{ <span class="hljs-keyword">var</span> installedPlugins = (<span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>._installedPlugins || (<span class="hljs-keyword">this</span>._installedPlugins = [])); <span class="hljs-keyword">if</span> (installedPlugins.indexOf(plugin) &gt; <span class="hljs-number">-1</span>) { <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span> } <span class="hljs-comment">// additional parameters</span> <span class="hljs-keyword">var</span> args = to<a href="http://www.js-code.com/tag/array" title="浏览关于“Array”的文章" target="_blank" class="tag_link">Array</a>(<span class="hljs-built_in">arguments</span>, <span class="hljs-number">1</span>); args.unshift(<span class="hljs-keyword">this</span>); <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> plugin.install === <span class="hljs-string">'function'</span>) { plugin.install.apply(plugin, args); } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> plugin === <span class="hljs-string">'function'</span>) { plugin.apply(<span class="hljs-literal">null</span>, args); } installedPlugins.push(plugin); <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span> }; }</code></pre> <p>很直观的就看到他在最后调用了 <code>plugin.install</code> 的方法,我们要做的就是处理好这个 <code>install</code> 函数即可。</p> <p>上代码</p> <p><code>config.js</code> 文件依旧需要,这里保存了所有状态码对应的转义文字</p> <p>创建一个 <code>myPlugin.js</code> 文件,这个就是我们编写的插件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import { typeConfig } from &quot;./config&quot; myPlugin.install = (Vue) => {<br /> Vue.mixin({<br /> filters: {<br /> $_filterType: (value) => {<br /> return typeConfig[value] || &quot;type undefined&quot;<br /> }<br /> }<br /> })<br /> }<br /> export default myPlugin" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> { typeConfig } <span class="hljs-keyword">from</span> <span class="hljs-string">"./config"</span> myPlugin.install = <span class="hljs-function">(<span class="hljs-params">Vue</span>) =&gt;</span> { Vue.mixin({ <span class="hljs-attr">filters</span>: { <span class="hljs-attr">$_filterType</span>: <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> { <span class="hljs-keyword">return</span> typeConfig[value] || <span class="hljs-string">"type undefined"</span> } } }) } <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> myPlugin</code></pre> <p>插件的 <code>install</code> 函数的第一个参数为 <code>Vue</code> 的实例,后面还可以传入一些自定义参数。</p> <p>在 <code>main.js</code> 文件中,我们不用 <code>Vue.mixin()</code> 转而使用 <code>Vue.use()</code> 来完成插件的装载。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import myPlugin from &quot;./myPlugin&quot; Vue.use(myPlugin)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> myPlugin <span class="hljs-keyword">from</span> <span class="hljs-string">"./myPlugin"</span> Vue.use(myPlugin)</code></pre> <p>至此,我们已经完成了一个小小的插件,并将我们的状态码转义过滤器放入了所有的 Vue 实例中,在 <code>.vue</code> 的模板文件中,我们可以使用 {{ typeStatus | $_filterType }} 来进行状态码转义了。</p> <h2 id="articleHeader5">结语</h2> <p><code>Vue.mixin()</code> 可以将自定义的方法混入<strong>所有的</strong> <code>Vue</code> 实例中。</p> <p>本着快速开发的目的,一排脑门想到了这个方法,但是这是否是一个好方法有待考证,虽然不是说担心会对原先的代码造成影响,但是<strong>所有的</strong> <code>Vue</code> 实例也包括了<strong>第三方模板</strong>。</p> <p><strong>本文可以随意转载,只要附上原文地址即可。</strong></p> <p><strong>如果您认为我的博文对您有所帮助,请不吝赞赏,点赞也是让我动力满满的手段 =3=。</strong></p> <h2 id="articleHeader6">待完善</h2> <h3 id="articleHeader7">发布 npm 包</h3> <h2 id="articleHeader8">新增项</h2> <h3 id="articleHeader9">在 v-html 中骚骚的使用 filter (2018年05月28日)</h3> <p>最近碰到一个问题,也是关于状态码过滤的,但是实现的效果是希望通过不同的状态码显示不同的 <code>icon</code> 图标,这个就不同于上面的文本过滤了,上文使用的 <code>{{ styleStatus | $_filterStyleStatus }}</code> 是利用 <code>v-text</code> 进行渲染,若碰到需要渲染 <code>html</code> 标签就头疼了。</p> <p>按照前人的做法,是这样的,我随意上一段代码。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="... <span v-if=&quot;item.iconType === 1&quot; class=&quot;icon icon-up&quot;></span><br /> <span v-if=&quot;item.iconType === 2&quot; class=&quot;icon icon-down&quot;></span><br /> <span v-if=&quot;item.iconType === 3&quot; class=&quot;icon icon-left&quot;></span><br /> <span v-if=&quot;item.iconType === 4&quot; class=&quot;icon icon-right&quot;></span><br /> ..." title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html">... <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"item.iconType === 1"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-up"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"item.iconType === 2"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-down"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"item.iconType === 3"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-left"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"item.iconType === 4"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> ...</code></pre> <p>不!这太不 fashion 太不 cool,我本能的拒绝这样的写法,但是,问题还是要解决,我转而寻找他法。</p> <p>在看 <code>Vue</code> 的文档的时候,其中一个 <code><a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a></code> <code>$options</code> <a href="https://cn.vuejs.org/v2/api/#vm-options" rel="nofollow noreferrer" target="_blank">官方文档</a> 就引起了我的注意,我正好需要一个可以访问到当前的 <code>Vue</code> 实例的 <code><a href="http://www.js-code.com/tag/api" title="浏览关于“API”的文章" target="_blank" class="tag_link">API</a></code>,一拍脑袋,方案就成了。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>首先,还是在 <code>config.js</code> 文件中定义一个状态码对应对象,这里我们将其对应的内容设为 <code>html</code> 段落。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a> iconStatus = {<br /> 1: &quot;<span class='icon icon-up'></span>&quot;,<br /> 2: &quot;<span class='icon icon-down'></span>&quot;,<br /> 3: &quot;<span class='icon icon-left'></span>&quot;,<br /> 4: &quot;<span class='icon icon-right'></span>&quot;<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> iconStatus = { <span class="hljs-number">1</span>: <span class="hljs-string">"&lt;span class='icon icon-up'&gt;&lt;/span&gt;"</span>, <span class="hljs-number">2</span>: <span class="hljs-string">"&lt;span class='icon icon-down'&gt;&lt;/span&gt;"</span>, <span class="hljs-number">3</span>: <span class="hljs-string">"&lt;span class='icon icon-left'&gt;&lt;/span&gt;"</span>, <span class="hljs-number">4</span>: <span class="hljs-string">"&lt;span class='icon icon-right'&gt;&lt;/span&gt;"</span> }</code></pre> <p>接着,我们在 <code>filters.js</code> 文件中引入他,写法还是和以前的 <code>filters</code> 一样。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import { iconStatus } from &quot;./config&quot; export default { $_filterIcon: (value) => {<br /> return iconStatus[value] || &quot;icon undefined&quot;<br /> }<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> { iconStatus } <span class="hljs-keyword">from</span> <span class="hljs-string">"./config"</span> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">$_filterIcon</span>: <span class="hljs-function">(<span class="hljs-params">value</span>) =&gt;</span> { <span class="hljs-keyword">return</span> iconStatus[value] || <span class="hljs-string">"icon undefined"</span> } }</code></pre> <p>重头戏在这里,我们在模板文件中需要渲染的地方,使用 <code>v-html</code> 来进行渲染。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<span v-html=&quot;$options.filters.$_filterIcon(item.iconType)&quot;></span>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html" style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">v-html</span>=<span class="hljs-string">"$options.filters.$_filterIcon(item.iconType)"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></pre> <p>大功告成,以后需要根据状态码来渲染 <code>icon</code> 的地方都可以通过这个办法来完成了。</p> <p>事实证明,懒并不一定是错误的,关键看懒的方向,虽然本篇博客写的标题是 <strong>偷懒</strong> ,但其实我只是对于重复性的无意义的搬运代码而感到厌烦,在寻找对应解决办法的时候可是一点都没偷懒,相反的,在寻求更快更好更方便的方法的时候,我逐渐找回了当初敲代码的乐趣。</p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26928.html