VUE 怎么样做 ‘暂无数据’

最新推荐文章于 2024-05-15 16:34:47 发布
最新推荐文章于 2024-05-15 16:34:47 发布
阅读量2.1k 收藏 4
点赞数 2
分类专栏： 前端学习笔记 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61426556/article/details/125497895
版权

很多时候我们都会碰见这样的需求，就是当数据为零的时候 我们页面上面要显示“暂无数据”，那么这个功能要怎么样去做呢？话不多说直接上代码.......

我这边以弹框举个例子

这个show里面的值就是你渲染存起来的值 ，然后用下标去判断，就可以了 ，这边要注意的是，我们要用一个大div去包裹你所写的代码，这样效果就出来了

上效果图：

觉得有用的小伙伴点点赞吧，求求了

星辰大海Amy
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
12-29
今天开始学习Vue.js的使用，但是在学习过程中发现一个问题，那就是页面加载数据时，原始代码会闪现一下。查访各方资料，终的解决方法。 第一步、加入一段css代码 <style type=text/css> [v-cloak] { display: none; } </style> 第二步、在view上引用css模块 <div id=app> <h1>{{message}}</h1> <h1>{{name}}</h1> </div> 注意，有的文章说，在具体数据部分加入v-cloak，但是这样太麻烦，每一个数据显示都要加，所以直接加载vie
#vue# 纯手写“页面数据为空时，显示空状态图片”
ZHENGCHUNJUN的博客
07-20 3341
需求：在我们的页面，没有显示任何数据时，显示图片以及提示语 效果： 后端接口数据 思路： （1）只需要在页面里面加入一个div，当页面里面的数据为0时，就用v-show展示出来（就是当页面没有数据的时候，就显示这个图片） （注意，这个空状态的div需要放在具体呈现的位置进行排版） //（2）设置一个变量，例如totalNum ，在js的data板块先把变量totalNum设置为0，就是先不展示出来 （3）最后一步，就是让我们的变量totalNum 全等于 0（就是没有数据...
vue中，el-table无数据（空数据）时，进行暂无数据的文本内容设置之具名插槽#empty（v-slot=empty）和empty-text
最新发布
weixin_44867717的博客
05-15 641
在表格空数据时显示的文本内容，也可以通过。设置，来展示【暂无数据】
Vue 层级菜单展示 没有数据、暂无数据 显示解决（详解）
Bnana博客
03-30 4435
问题描述 问题解析 数据中存在 为空数据 children:[ ] 解决思路 将没子节点数据内容改为 undefind <template> <div> <div>层级菜单显示</div> <!- clearable 可清除 级联 :options 级联数据 show-all-levels 展示所有等级 props 配置文...
vue封装的一个暂无数据组件
苗雪松的博客
02-15 3292
&lt;template&gt; &lt;div class="zwsj"&gt; &lt;img :src="icon" :width="imgW" :height="imgH"/&gt; &lt;div style="color: #999;font-size: 12px;margin-top: 5px"&gt;{{tex
vue外卖二十三：搜索页：搜索商家列表ajax请求编写+放入vuex+获取、有数据时显示数据，无数据时显示暂无结果、li标签换成店铺访问链接，tag把router-link转Li+to传参2种写法
*
12-16 676
一、搜索商家列表ajax请求编写+放入vuex+获取 1）准备及获取state page/search/search.vue <!-- 【3】阻止默认提交事件,用search方法代替 --> <form class="search_form" @submit.prevent="search"> <!--【1】绑定数据 --> <input type="search" placeholder="请输入商家名称" class="searc
VUE大屏数据看板面板
06-24
基于VUE写的数据看板，有九个模块，分别为：订单总量（柱状图），生产概况（数字面板），企业宣传（轮播图），产品质量分析（饼状图），客户分布（地图且有标点信息），客户订单排行（上下滚动），企业利润分析（柱...
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
10-15
今天小编就为大家分享一篇解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue.js组件之间传递数据的方法
01-19
组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。如何传递数据也成了组件的重要知识点之一。 组件 组件与组件之间，还存在着不同的关系。父子关系与...
关于vue.js中实现方法内某些代码延时执行
12-13
具体情况为前台grid在执行完增删改操作后需要在增加或者修改弹框点击确定导致弹框消失后，grid内数据能够及时更新以便显示增删改操作后的数据。这里的话使用的是vue.js中的setTimeout函数来解决该问题。 代码如下： ...
【vue+element】vue2表格无数据的时候显示图片展示
qq_44971635的博客
03-20 638
vue2表格无数据的时候显示图片展示
vue中如果解决列表删除最后一页暂无数据bug
shi15926lei的博客
11-28 688
vue中如果解决列表删除最后一页暂无数据bug
vue显示列表，在展示真实列表数据前，页面会闪现出现暂无数据组件内容
m0_55546349的博客
07-07 582
vue显示列表，在展示真实列表数据前，页面会闪现出现暂无数据组件内容
vue+echarts 暂无数据显示，横坐标可拖拽条添加，可拖拽条动态设置默认显示时间跨度
扬帆前行
06-03 2112
对于echarts图表 目标： 1、切换维度日和月，选择筛选条件起始时间和结束时间，筛选的内容， 横坐标添加可拖拽显示的拖拽条，并且根据选择时间的数据量大小来设置默认显示的拖拽条宽度 2、当查询没有数据的时候，显示暂无数据 initEchart(){ const myCharts = this.$echarts.init(this.$refs.myCharts);//初始化echarts对象 myCharts.showLoading({text: "数据加载中...",textColor:
vue3+TS+element-plus，展示空白消息提示-暂无数据，组件
weixin_45288172的博客
04-23 417
vue3+TS+element-plus，展示空白消息提示-暂无数据，组件
vue加载页面时会闪烁未加载数据，解决办法
qq_43185247的博客
06-23 886
vue页面加载闪烁问题解决方法
Vue解决无数据图片闪现的问题
qq_36811160的博客
04-23 1159
1、在data里面定义isInit属性，默认值为false data() { return { childrenArr: [], isInit: false, } }, 2、在最外层的div上控制显示 <div id="app" class="gp-bind-li...
Vue 绑定数据闪现问题
12-21 149
{{message}}绑定数据时，在真实数据没有出来前会闪现{{message}} 解决方案： 1、给需要的地方v-cloak 2、给v-cloak设置样式 [v-cloak] { display:none; } ...
vue 前端实现数据暂存
06-06
在 Vue 前端实现数据暂存可以使用 Vuex，它是 Vue.js 的状态管理模式。Vuex 允许我们在一个中央位置存储和管理应用程序的所有组件的状态，这样我们就可以轻松地从组件中访问和修改状态。Vuex 还提供了一些工具来帮助...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值