title: if-emoji lookup table with Vue
body: <p>I'm using the npm module <a href="https://www.npmjs.com/package/if-emoji" rel="nofollow noreferrer"><code>if-emoji</code></a> to detect whether a user can view emojis or not. There is a similar tool in Modernizr.</p>
  <p>If the user can't view emojis, I'm displaying an image of the emoji instead. So my Vue HTML looks like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;h2 v-if=&quot;this.emojis&quot;&gt;&lt;/h2&gt;
  &lt;h2 v-if=&quot;!this.emojis&quot;&gt;&lt;img src=&quot;https://example.com/emoji.png&quot;&gt;/h2&gt;
  </code></pre>
  <p>Does this still download the image for users who can view emojis, therefore using bandwidth unecessarily?</p>
  <p>And is there a more efficient way of doing this, so that I don't need to go and add <code>v-if</code> every time I use an emoji? Can there be some sort of lookup table, if there's an emoji and <code>!this.emojis</code>?</p>