vue.js列表渲染疑问

问题描述

问 题

怎么使用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"}]

解决方案

<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就是你的数据

这篇关于vue.js列表渲染疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！