<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Hello everyone,</p>
<p dir="auto">Sometimes i want to show different content depending on a variable value and <code class="notranslate">v-if</code>  is a bit less legible than this proposed <code class="notranslate">v-switch</code> directive</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template v-switch=&quot;variable&quot;&gt;
  &lt;div v-case=&quot;1&quot;&gt;
   ... some content A
  &lt;/div&gt;
  &lt;div v-case=&quot;2&quot;&gt;
   ... some content B
  &lt;/div&gt;
  &lt;div v-default&gt;
   ... some content C
  &lt;/div&gt;
&lt;/template&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">template</span> <span class="pl-c1">v-switch</span>="<span class="pl-s">variable</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">v-case</span>="<span class="pl-s">1</span>"<span class="pl-kos">&gt;</span>
   ... some content A
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">v-case</span>="<span class="pl-s">2</span>"<span class="pl-kos">&gt;</span>
   ... some content B
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">v-default</span><span class="pl-kos">&gt;</span>
   ... some content C
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Note that the <code class="notranslate">&lt;div&gt;</code>s can be <code class="notranslate">&lt;template&gt;</code>s or components as well</p>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Syntax sugar on several v-if, v-else-if, v-else-if etc</p>
<p dir="auto">An example syntax could be:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;wrapper&quot; v-switch=&quot;headingType&quot;&gt;
    &lt;h1 v-case=&quot;big&quot;&gt;Headline&lt;/h1&gt;
    &lt;h2 v-case=&quot;small&quot;&gt;Headline&lt;/h2&gt;
    &lt;h3 v-case=&quot;smaller&quot;&gt;Headline&lt;/h3&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div class="wrapper" v-switch="headingType"&gt;
    &lt;h1 v-case="big"&gt;Headline&lt;/h1&gt;
    &lt;h2 v-case="small"&gt;Headline&lt;/h2&gt;
    &lt;h3 v-case="smaller"&gt;Headline&lt;/h3&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">To do this in the current setup would be:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;wrapper&quot;&gt;
    &lt;h1 v-if=&quot;headingType === 'big'&quot;&gt;Headline&lt;/h1&gt;
    &lt;h2 v-else-if=&quot;headingType === 'small'&quot;&gt;Headline&lt;/h2&gt;
    &lt;h3 v-else-if=&quot;headingType === 'smaller'&quot;&gt;Headline&lt;/h3&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div class="wrapper"&gt;
    &lt;h1 v-if="headingType === 'big'"&gt;Headline&lt;/h1&gt;
    &lt;h2 v-else-if="headingType === 'small'"&gt;Headline&lt;/h2&gt;
    &lt;h3 v-else-if="headingType === 'smaller'"&gt;Headline&lt;/h3&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">You can see how the switch statement would make the html markup so much cleaner</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;wrapper&quot; v-switch=&quot;headingType&quot;&gt;
    &lt;h1 v-case=&quot;big&quot;&gt;Headline&lt;/h1&gt;
    &lt;h2 v-case=&quot;small&quot;&gt;Headline&lt;/h2&gt;
    &lt;h3 v-case=&quot;smaller&quot;&gt;Headline&lt;/h3&gt;
 &lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div class="wrapper" v-switch="headingType"&gt;
    &lt;h1 v-case="big"&gt;Headline&lt;/h1&gt;
    &lt;h2 v-case="small"&gt;Headline&lt;/h2&gt;
    &lt;h3 v-case="smaller"&gt;Headline&lt;/h3&gt;
 &lt;/div&gt;
</code></pre></div>