vue内容很多时保证只有一定的高度，点击查看更多再展开所有的

上面是文章的内容，下面有个评论和点赞。要保证无论文章多长，下面的评论和点赞位置一直要在下面，其中一直方式是利用底部菜单的形式：<nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item">提交订单</a>
</nav>

但是如果不想用这种呢？

还有一种就是通过一个查看更多的按钮，点击了才会展开显示所有的内容，不然显示一个页面的。

<!--文章-->

           <div :class="{showall:true,active:showall}">
                <h1 class="title" >标题</h1>
                <p class="tool">时间</p>
               <div v-html="list.content" class="article"></div>

         </div>

<div class="mui-text-center imgbtn" :class="{active:showall}" @tap="showall=!showall"><img src='img/showall.png' /><h6>查看所有</h6></div>
               <div class="mui-clearfix">
                       <span class="replay mui-pull-left" >111条评论</span>
                       <span class="mui-pull-right" >1条赞</span>
              </div>

重点看标记颜色的代码。

css也是很重要的

/*收缩框*/
   .showall {
          padding: 10px;
        height: 300px;
        overflow: hidden;
        clear: both;
        background: #f5f5f5;
        margin-top: 6px
    }
    
    .showall.active {  //点击了查看更多，就高度就不管了。随实际的大小变化
        height: auto;
        background: #fff;
        min-height: 150px;
    }
    
    .imgbtn {
        border-top: 1px solid #ccc;
        margin-top: 6px;
        margin-bottom: 10px
    }

js的内容，这里就只显示主要的啦

 data(){
        return{
        showall：false//刚开始没有激活

}}