一个完整页面应该包含的三个部分。加载中加载完都有不同的特效

//加载完有数据

<div class="mui-loading" v-if="list!=null">

         <h6 class="mui-text-center" v-html="content">这里是主要的内容</h6>

</div>

//加载中~

<div class="mui-loading" v-if="list==null">

                   <div class="mui-spinner"></div>
                   <h6 class="mui-text-center">精彩内容马上呈现...</h6>

 </div>

//加载完没数据

 <div class="no-content" v-if="list&&list.length==0">
                   <img src="img/nodata.png" />
                   <h6 class="mui-text-center">暂无内容，敬请期待~</h6>
  </div>

样式：     （只是轻微的改变样式，去掉只是没那么美观）

.no-content { text-align: center; padding-top: 50px; }
.mui-loading { padding-top: 120px;  }

script的时候定义的时候

  data() {
            return {
                list: null,  // 只有定义成null，他在初始化进去的时候才会显示加载中
            }
        },