Vue进阶（六十一）：v-loading 实现加载效果及elementUI 中 el-date-picker中弹出的日期和时间的输入框设置为只读

原创已于 2024-04-19 15:17:58 修改 · 6.4w 阅读

CC 4.0 BY-SA版权

文章标签：

于 2019-07-11 14:11:49 首次发布

206 篇文章

订阅专栏

博客围绕Vue相关技术展开，介绍了v-loading实现加载效果，在接口请求数据前显示加载中，请求到数据后消失；还提及在elementUI里将el-date-picker弹出的日期和时间输入框设为只读，以及Vue.js常用指令的缩写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用v-loading在接口未请求到数据之前，显示加载中，直到请求到数据后消失。

//全局loading
<template>
   <div v-loading="loading"> </div>
</template>

在data 中定义初始化， loading: false，同时在mounted()中将 this.loading设置为true,再去请求接口.,

在接口的回调函数中，将 this.loading 设为false，到达加载动画效果。

如果写在template下的顶层元素上的话，就不会触发全屏loading。

// 局部loading
<template>
    <div> 
        <section v-loading="loading"></section>
    </div>
</template>

在项目开发过程中，需要使用el-date-picker日期控件，需求是elementUI 中 el-date-picker中弹出的日期和时间的输入框设置为只读。
在这里插入图片描述
实现方式如下：

<el-date-picker type="date" :editable="false"> </el-date-picker>

Vue.js为两个最常用的指令提供了特别的缩写：

v-bind缩写

<!--完整语法-->
<a v-bind:href="url">测试</a>
<!--缩写-->
<a :href="url">测试</a>

v-on缩写

<!--完整语法-->
<a v-on:click="doSomething">修改</a>
<!--缩写-->
<a @click="doSomething">修改</a>