最近在用vue做一个评论区域，想请教一下

最近在做一个评论区块，获得了数据，想实现如果：item.subCommentList.length > 1，显示 “展开更多这个按钮”，反之则隐藏这个按钮，因为没有超过1条以上二级评论。
问题在于，我发觉用v-else好像不怎么还实现...请教一下思路？代码如下：

    <div class="comment-item">
        <a class="avatar" href="javascript:void(0);"><img :src="item.userAvatar" alt=""></a>
        <div class="comment-main">
            <div class="name">{{ item.nickName }}</div>
            <div class="time">{{ item.createTime }}</div>
            <div class="comment-content">{{ item.content }}</div>
            <div v-if="true" class="subcomment-list">
                <div class="comment-floor" v-for="child in item.subCommentList" v-if="item.subCommentList.length > 1" v-show="$index < 1">
                    <div class="name">{{ child.nickName }}</div>
                    <div class="comment-content">{{ child.content }}</div>
                </div>
                <a class="more" href="javascript:void(0);" @click="moreComment">展开更多回复</a>
            </div>
        </div>
    </div>

---

额自己解决了，v-if做在a标签上就行了

---

你的 if 判断条件不能和 for 在同一级啊，不然肯定实现不了。要先判断子评论列表是否 > 1，是则渲染一条出来，其他的渲染在另一个 ul 或者 table 里，然后 hidden 掉，同时再渲染个 button ，点击 button 把 hidden 的内容显示出来即可。如果 < 1 就直接全部渲染出来不用渲染 button ，大概如下：

<div v-if="true" class="subcomment-list">
    <div v-if="item.subCommentList.length > 1">
        <div id="firstComment">{{ item.subCommentList[0].content }}</div>
        <button @click="showMore(xx)">显示更多</button>
        <ul id="xx">
            <li v-for="(index, item) in item.subCommentList">
                <div v-if="index != 0">{{ item.content }}</div>
            </li>
        </ul>
    </div>
    <div v-else>
        <ul>
            <li v-for="item in item.subCommentList">
                <div>{{ item.content }}</div>
            </li>
        </ul>
    </div>
</div>   

然后实现 showMore 方法， 根据 ul 的 id 显示不同的更多评论即可