vue过滤器用法实例分析

旧城等待， 2021-12-14 11:27 272阅读 0赞

**过滤器:**

vue提供过滤器:

capitalize uppercase currency....

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"box"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ {msg|currency ￥}}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

debounce 配合事件，延迟执行

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;</code> 
      <code>div</code> 
      <code>id</code> 
      <code>=</code> 
      <code>"box"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;</code> 
      <code>input</code> 
      <code>type</code> 
      <code>=</code> 
      <code>"text"</code> 
      <code>@</code> 
      <code>keyup</code> 
      <code>=</code> 
      <code>"show | debounce 2000"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/</code> 
      <code>div</code> 
      <code>&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**数据配合使用过滤器:**

limitBy 限制几个  
limitBy 参数(取几个)  
limitBy 取几个 从哪开始

**[vue插件][vue]filterBy 过滤数据**  
filterBy '谁'

**[angular][] orderBy 排序**

orderBy 谁 1/-1  
1 -> 正序  
2 -> 倒序

自定义过滤器: model ->过滤 -> view

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>Vue.filter(name,</code> 
      <code>function</code> 
      <code>(input){ </code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

![2019315120700681.png_201921512720][]

**时间转化器**

**50、[选择器][Link 1]过滤html标记**

双向过滤器:\*

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>Vue.filter(</code> 
      <code>'filterHtml'</code> 
      <code>,{ </code> 
     </div> 
     <div> 
      <code>　　read:</code> 
      <code>function</code> 
      <code>(input){ </code> 
      <code>//model-view</code> 
     </div> 
     <div> 
      <code>　　　　</code> 
      <code>return</code> 
      <code>input.replace(/&lt;[^&lt;+]&gt;/g,</code> 
      <code>''</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>　　},</code> 
     </div> 
     <div> 
      <code>　　write:</code> 
      <code>function</code> 
      <code>(val){ </code> 
      <code>//view -&gt; model</code> 
     </div> 
     <div> 
      <code>　　　　</code> 
      <code>return</code> 
      <code>val;</code> 
     </div> 
     <div> 
      <code>　　}</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**数据 -> 视图**

model -> view

view -> model

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>&lt;!DOCTYPE html&gt;</code> 
     </div> 
     <div> 
      <code>&lt;html lang=</code> 
      <code>"en"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&lt;head&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;meta charset=</code> 
      <code>"UTF-8"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;title&gt;&lt;/title&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;style&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/style&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;script src=</code> 
      <code>"vue.js"</code> 
      <code>&gt;&lt;/script&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;script&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>//&lt;h2&gt;welcome&lt;/h2&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>Vue.filter(</code> 
      <code>'filterHtml'</code> 
      <code>,{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>read:</code> 
      <code>function</code> 
      <code>(input){ </code> 
      <code>//model-view</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>alert(1);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>input.replace(/&lt;[^&lt;]+&gt;/g,</code> 
      <code>''</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>write:</code> 
      <code>function</code> 
      <code>(val){ </code> 
      <code>//view -&gt; model</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>console.log(val);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>val;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>window.onload=</code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>vm=</code> 
      <code>new</code> 
      <code>Vue({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>data:{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>msg:</code> 
      <code>'&lt;strong&gt;welcome&lt;/strong&gt;'</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}).$mount(</code> 
      <code>'#box'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/script&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/head&gt;</code> 
     </div> 
     <div> 
      <code>&lt;body&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;div id=</code> 
      <code>"box"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;input type=</code> 
      <code>"text"</code> 
      <code>v-model=</code> 
      <code>"msg | filterHtml"</code> 
      <code>&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>&lt;br&gt;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>{ {msg | filterHtml}}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>&lt;/div&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/body&gt;</code> 
     </div> 
     <div> 
      <code>&lt;/html&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/good10000/p/10592561.html

[vue]: http://www.100sucai.com/tag/99/
[angular]: http://www.100sucai.com/tag/210/
[2019315120700681.png_201921512720]: https://files.jb51.net/file_images/article/201903/2019315120700681.png?201921512720
[Link 1]: http://www.100sucai.com/tag/50/