html + vue + axios 加载内容时默认骨架设置；

html:

<template v-if="action == 'default'">{内容：}.....</template>
......
<template v-if="action == ''">
    <div class="skeleton"><img src="http://caitaitai.cdn.ekweixin.com/0ff29675bdded360dd25d536bdfcd7624d140278261-ZKkQOt_fw658.png" /></div>
</template>

js:

var app = new Vue({
    el: "#app",
    data: {
        firstload: false,//第一次items为空时，不执行，之后判断如果为空，执行；
        finished: false,
        loading: false, 
        orders:{},//内容对象
        action:"",//默认骨架；
    },
    created: function () {
        this.getOrderList(1);//案例内容列表；
    },
    filters: {
        curreny: function (data) {
            data = Number(data).toFixed(2);
            return data;
        }
    },
    methods: {
    //案例：请求的方法；
    getOrderList:function (page) {
        var that=this;
        if(that.loading){return false;}
        that.loading = true;
        that.finished = false;
      //请求接口，返回内容添加赋值；
        axios.get('/api/purchases/lists',{params:{page:page,status:2}}).then(function (res) {
            that.loading = false;
            that.finished = true;
            //  console.log(res.data);
            if (res.data.code == 0) { 
                that.orders = res.data.data;
                that.action='default';
            }else{
                that.$toast(res.data.message);
            }
        })
        },
    }
})

触发按钮请求时，防对此点击请求，优化体检：

            var that = this;
            that.loading = true;
            that.finished = false;
            if (that.loading) {
                that.$toast.loading({
                    mask: false
                });
            }
            axios.post(utl,params).then(function(res){
                that.loading = false;
                that.finished = true;
                that.$toast(res.data.msg);
                if(res.data.code===0){
                    window.location.reload();
                }
            }).catch(function (res) {
                that.$toast(res);
            });