vue.js列表渲染疑问

Question

怎么使用vue.js把json对象遍历成下面的列表
<ul>

    <li>
        <i class="icon iconfont icon-1"></i>
        <div class="logo"></div>
        <p>小黄人</p>
    </li>
    <li>
        <i class="icon iconfont icon-2"></i>
        <div class="logo"></div>
        <p>李四</p>
    </li>
    <li>
        <i class="icon iconfont icon-3"></i>
        <div class="logo"></div>
        <p>王二</p>
    </li>
    <li>
        <i>4</i>
        <div class="logo"></div>
        <p>麻子</p>
    </li>

</ul>
其中前三个li标签下的i标签的class如上面，从第四个li标签开始i标签都没有class了，这要怎么遍历，大神们教教我呗
这是json数据[{"logo":"\/image\/1.jpg","name":"\u5c0f\u9ec4\u4eba"},{"logo":"\/image\/2.jpg","name":"\u674e\u56db"},{"logo":"\/image\/2.jpg","name":"\u738b\u4e8c"},{"logo":"\/image\/2.jpg","name":"\u9ebb\u5b50"}]

Answer 1

<li v-for="item in json">

<i class="icon iconfont icon-{{$index+1}}" v-if="$index<4"></i>
<i v-else></i>
<div class="logo"></div>
<p>{{ item.name }}</p>

</li>

json就是你的数据

Answer 2

<li v-for="item in items">

<i class="icon iconfont" :class="{'icon-{{$index+1}}':$index<3}"></i>
    <div class="logo"></div>
    <p>小黄人</p>

</li>

Answer 3

  <li v-for="li in list">
    <i v-if="$index < 3" :class="['icon', 'iconfont', 'icon-' + ($index + 1)]"></i>
    <i v-else>{{$index + 1}}</i>
    <div class="logo"><img :src="li.logo"></div>
    <p>{{li.name}}</p>
  </li>

http://jsfiddle.net/ygjack/3jnk9coy/