<ul>
<li v-for="(skill, i) in skills" :key="skill.name">
<p>
{{i+1}}. {{ skill.name }}-
<span v-if="skill.experience<4">Beginner</span>
<span v-else-if="skill.experience<6">Proficient</span>
<span v-else Expert</span>
</p>
</li>
</ul>
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
<div id="app">
<p id="A" v-if="showMessageA">A</p>
<p id="B" v-else-if="showMessageB">B</p>
<p id="C" v-else>C</p>
</div>
<h1 v-if="variable">Vue is awesome!</h1>