v-for 默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素，你需要提供一个 key 的特殊属性：

<div v-for="item in items" :key="item.id">  {{ item.text }}</div>

v-for 还可以循环数组：

<div id="app">
  <ul>
    <li v-for="n in [1,3,5]">
      {{ n }}
    </li>
  </ul>
</div>

演示 v-else-if 用法，根据分数来判断等级：

<div id="app">
    <div v-if="type>='90'">
    优秀
    </div>
    <div v-else-if="type<90&type>=80">
    良
    </div>
    <div v-else-if="type<80&type>=70">
    中等
    </div>
    <div v-else-if="type<70&type>=60">
    及格
    </div>
    <div v-else-if="type<60" >
    不及格
    </div>
</div>

v-if 和 v-show 区别：

v-if 是动态添加，当值为 false 时，是完全移除该元素，即 dom 树中不存在该元素。

v-show 仅是隐藏 / 显示，值为 false 时，该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。

v-else-if 使用实例：

<div id="vApp">
    <!--v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用-->
    <input type="text" class="edit" placeholder="判断输入的字符长度" v-model="inp">
    <h2 v-if="calLen(inp)>10">输入的字符长度大于10</h2>
    <h2 v-else-if="calLen(inp)>5">输入的字符长度大于5</h2>
    <h2 v-else-if="calLen(inp)>0">输入了字符</h2>
    <h2 v-else>没有输入字符</h2>
    <div>
        <!--也可以使用 v-show 指令来根据条件展示元素-->
        <img src="../asset/img/ic_user.png" v-show="calLen(inp)<=0">
        <img src="../asset/img/ic_question.png" v-show="calLen(inp)>0">
        <img src="../asset/img/ic_stop.png" v-show="calLen(inp)>5">
        <img src="../asset/img/ic_info.png" v-show="calLen(inp)>10">
    </div>
</div>