<h3 dir="auto">What problem does this feature solve? 这个功能解决了什么问题？</h3>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;tag :attr=&quot;expression | filter | filter&quot; /&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">tag</span> <span class="pl-c1">:attr</span>="<span class="pl-s">expression | filter | filter</span>" /&gt;</pre></div>
<p dir="auto">The symbol <code class="notranslate">|</code> which is in use now, is a JavaScript symbol with it's origin use.<br>
目前所采用的 <code class="notranslate">|</code> 符号在 JavaScript 里有其自身的用途。</p>
<p dir="auto">Maybe the user want to write a exprssion with <code class="notranslate">|</code> like this:<br>
使用者很可能想要的，本是一个像这样的包含 <code class="notranslate">|</code> 运算符的表达式：</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;tag :attr=&quot;a &amp; b | c | d&quot; /&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">tag</span> <span class="pl-c1">:attr</span>="<span class="pl-s">a &amp; b | c | d</span>" /&gt;</pre></div>
<h3 dir="auto">What does the proposed API look like? 你期望的 API 是怎样的？</h3>
<p dir="auto">Symbol <code class="notranslate">;</code> will never be used in an expression:<br>
<code class="notranslate">;</code> 肯定不会出现在一个表达式中（因此没有冲突的可能）：</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;tag :attr=&quot;expression ; filterA ; filterB&quot; /&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">tag</span> <span class="pl-c1">:attr</span>="<span class="pl-s">expression ; filterA ; filterB</span>" /&gt;</pre></div>
<p dir="auto">Origin symbol <code class="notranslate">~</code> or <code class="notranslate">:</code> or <code class="notranslate">@</code> will never follow an expression:<br>
原始语义的 <code class="notranslate">~</code> 或 <code class="notranslate">:</code> 或 <code class="notranslate">@</code> 也不会紧跟在一个表达式后面：</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;tag :attr=&quot;expression ~ filterA ~ filterB&quot; /&gt;
&lt;tag :attr=&quot;expression : filterA : filterB&quot; /&gt;
&lt;tag :attr=&quot;expression @ filterA @ filterB&quot; /&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">tag</span> <span class="pl-c1">:attr</span>="<span class="pl-s">expression ~ filterA ~ filterB</span>" /&gt;
<span class="pl-kos">&lt;</span><span class="pl-ent">tag</span> <span class="pl-c1">:attr</span>="<span class="pl-s">expression : filterA : filterB</span>" /&gt;
<span class="pl-kos">&lt;</span><span class="pl-ent">tag</span> <span class="pl-c1">:attr</span>="<span class="pl-s">expression @ filterA @ filterB</span>" /&gt;</pre></div>
<p dir="auto">Use other unemployed symbols look good:<br>
采用其它未被使用的直观符号：</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;tag :attr=&quot;expression -&gt; filterA -&gt; filterB&quot; /&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">tag</span> <span class="pl-c1">:attr</span>="<span class="pl-s">expression -&gt; filterA -&gt; filterB</span>" /&gt;</pre></div>
<p dir="auto">Thanks a lot for this great work. I talk my little idea.</p>
<p dir="auto">Vue use the unix “pipe” symbol to apply filters:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{{ message | filterA | filterB }}"><pre class="notranslate"><code class="notranslate">{{ message | filterA | filterB }}
</code></pre></div>
<p dir="auto">But it is also a javascript symbol as "bitwise or". It seems rather strange.<br>
I think the better way to apply filters is arrow:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{{ message -&gt; filterA -&gt; filterB }}
{{ myNumber -&gt; currency }}"><pre class="notranslate"><code class="notranslate">{{ message -&gt; filterA -&gt; filterB }}
{{ myNumber -&gt; currency }}
</code></pre></div>