vue-根据后端接口返回的数据决定图片的显示与否

最新推荐文章于 2023-04-06 18:16:32 发布
最新推荐文章于 2023-04-06 18:16:32 发布
阅读量648 收藏 1
点赞数
分类专栏： 工作中的小问题 文章标签： javascript html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sdaw_1/article/details/119923842
版权
本文介绍如何在Vue.js应用中，根据后端接口返回的数据动态控制图片的显示。通过JavaScript处理响应数据，并在HTML模板中利用条件渲染来决定图片是否展示。
摘要由CSDN通过智能技术生成

html:

	  <div v-if="PI"><img src="@/images/bg_02.png" class="part_1" /></div>
      <div v-if="BTC"><img src="@/images/bg_03.png" class="part_2" /></div>
      <div v-if="ETH"><img src="@/images/bg_04.png" class
最低0.47元/天 解锁文章
七彩猫猫虫
关注
专栏目录
echarts vue element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应（一）
总结前端开发中遇到的问题，分享前端知识
04-12 4664
element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应
JSF利用前端判断后台传回数据字段并判断显示不同的信息
渴望飞的鱼的博客
07-09 2652
JSF可以使用rendered 来判断是否显示。 例如：如果后台传回数据的节点是 S ，那么前端的h:outputText根据状态是否S显示。 前端展示结果： 上代码，前端显示： t通过点击查询按钮，表单直接显示核心代码： 如果传回数据Invoice.stat_cde=='S' 并且empty snOrderInvoice.and_red_id不为空的时候，则显示红票。 如果...
使用vue实现图片的显示和隐藏
m0_69775127的博客
03-20 917
v-if和v-show：v-if用来控制元素显示和隐藏，属性为布尔值。v-show可以实现与v-if同样的效果，但是v-show是操作元素的display属性，而v-if会对元素进行删除和重新创造，所以v-if在性能上不如v-show。v-show会取v-show的反向指令，出现隐藏效果）组件：在vue中，组件是构成页面中独立结构单元，能够减少重复代码的编写，提高开发效率，降低代码之间的耦合程度，使项目更易维护和管理。v-for：可以实现页面列表渲染，常用来循环数组。
vue双向绑定之（一）vue是如何知道数据发生变化的
前端小师姐迪迪_的博客
09-24 666
vue最大的特点之一就是数据驱动视图。 一个页面的数据是支撑页面变成一个活页面的基础。 页面中数据变化的原因，可能是由于用户操作或者后端数据的变化引起的，数据data的变化，导致页面模板也随之变化。今天来说一下vue是如何知道数据变化了的。 开门见山，vue监听数据变化其实是用了js自带的标准内置对象 Object 中的一个静态方法 defineProperty Object.defineProperty 依据vue源码路径：项目中uve源码文件node_modules/vue/src/core/obs.
vue中data定义数组用于v-if的indexOf判断el-image的显示隐藏
怡暘
09-24 2947
背景： 首先感叹vue真的是博大精深。项目开发中遇到这样一个功能，根据数组中的数据动态设定el-image的显示隐藏。 1. 问题代码： test.vue中代码： <el-table :data="resRSData" :highlight-current-row="false" height="100%"> <el-table-column type="selection" min-width="1" /> <el-table-column label="缩略图"
通过接口返回信息判断模态框显示与隐藏
weixin_43923202的博客
02-24 637
const mutations = { SET_UPDATE_VISIBLE { state.updateVisible = data }, } //显示模态框 this.$store.commit(“SET_UPDATE_VISIBLE”,true)
vue通过返回值来判断图标的显示/隐藏，改变图标颜色
asteriaV的博客
08-20 6398
在表格中通过后台返回数据来判断图标的变化 方法1： 如上，后台返回的status=1为已阅，status=0为未批阅，已阅则显示绿色的图标，我这里是用vue+elementui来实现的： <el-table-column label="已阅"> <template slot-scope="scope"> <div> <i class="e...
vue element 表格根据后台返回的数据来决定展示数据还是可操作的按钮
热门推荐
找个借口安静
06-06 1万+
这个其实也就是一个v-if就能搞定的事情，很简单的！看下面的代码吧，我在代码打上注释，看了就会了！&lt;el-table-column label="角色"min-width="100"&gt; &lt;template scope="scope"&gt; &lt;!--假设类型的字段是type--&gt; &lt;!--如果当前行type字段等于0，
VUE项目后端接口返回图片流，图片在preview里，怎么把图片显示到页面上？
11-24 6173
今天碰到一个接口，后端返的二维码是文件流，在preview里能看到，但response里啥都没有，这种情况怎么拿到这张图片呢？
技巧5 vue3中用户账号密码登录功能的实现|axios接收后端返回的数据处理|vue3+axios+python
yangyangdt的博客
01-16 8229
vue3中axios用户账号密码登录功能的实现|axios接收后端返回的数据处理|vue3+axios+python
解决vue请求接口第一次成功,第二次失败问题
10-14
如果数据没有被正确地重置或更新，那么第二次请求可能会携带错误的数据，导致接口返回错误。例如，在提供的代码片段中，`this.form`对象包含了旧密码、新密码和确认密码，如果在提交表单后没有正确地清空或重置这些...
echarts vue element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应（二）
总结前端开发中遇到的问题，分享前端知识
06-16 4246
实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应
vue 根据后台数据 判断显示_Vue实战——利用路由元信息隐藏页面跳转后的主路由...
weixin_39881155的博客
11-21 541
承接上文：Vue实战——路由的导航守卫与从后台获取数据，继续我们的继续我们的实战之旅，本项目Gitee地址：https://gitee.com/vuejslearn/news-list.git当我们启动项目后，发现首页有导航栏：首页的导航栏然后我们点击newAbout，发现依然有导航栏：newAbout页面如果我们的项目中需要在一些页面中不显示导航栏，该怎么做呢？很简单，我们利用Router的元信...
微信小程序根据后台状态来控制元素隐藏或显示，给遍历的消息列表未读条目显示小红点
qq_36341910的博客
04-26 5043
遍历消息列表未读条目显示小红点前言实现步骤总结 前言 作为一个从来没接触过小程序的菜鸟，上手一个小程序就是第一次独立开发微信小程序，各种东西不大熟悉，踩了很多坑。不禁纳闷，我明明可以靠颜值吃饭，为什么还得靠实力 ，咳咳，废话少说，现在有一个需求，就是要在动态渲染出来的消息列表中，给每一条未读消息添加小红点，点击阅读后小红点消失，然后再返回消息页面后，点击过的消息的小红点消失。 所谓菜鸟程序员自然是...
【前端】Vue通过过滤器filters实现对后端返回的集合对象中的字段进行判断显示对应的值
m0_64210833的博客
04-06 1391
Vue通过过滤器filters实现对后端返回的集合对象中的字段进行判断显示对应的值
vue 根据后台数据 判断显示_Vue实战——路由的导航守卫与从后台获取数据
weixin_39953100的博客
11-20 632
承接上文Vue实战——vueRouter路由的添加与配置，继续我们的实战之旅，本项目Gitee地址：https://gitee.com/vuejslearn/news-list.git从本项目中的导航配置文件中，我们发现了：{ path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', // route ...
vue中根据后端接口数据控制按钮的显示与隐藏（手动添加响应式this.$set()）
upStar1的博客
04-08 6895
项目涉及到的问题，按钮需要根据后端返回的参数情况，实现按钮的显示与隐藏。 效果如图： 1.查看后端接口 get请求，需要传businessId和compoCode两个参数，返回的data有数据就显示按钮，没数据就隐藏按钮。 2.在config.js中配置 isExistProcess: `/${version}/common/isExistProcess`, 3.准备参数 地址有了，compoCode是每个页面唯一的可直接获取，businessId是getTableData接口.
【Vue基础四】Vue检测数据改变的原理
hannah2233的博客
09-16 489
Vue监视数据的原理vue会监视data中所有层次的数据。如何监测对象中的数据？通过setter实现监视，且要在new Vue时就传入要监测的数据对象中后追加的属性，Vue默认不做响应式处理```js```如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事:调用原生对应的方法对数组进行更新。重新解析模板，进而更新页面。使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
Vue - 监视属性和 Vue检测数据改变的原理
qq_33962481的博客
12-15 1172
文章目录一、监视属性 - watch 一、监视属性 - watch 通过vm对象的$watch() 或 watch 配置来监视指定的属性
vue怎样取后端接口返回的数据
最新发布
09-20
在Vue中，您可以使用以下几种方法来获取后端接口返回的数据： 1. 使用Vuex状态管理：Vuex是一个用于Vue的状态管理库，它可以帮助您在应用程序中管理全局状态。您可以在Vuex的store中定义一个状态对象，用于存储从后端接口获取的数据。然后，您可以使用Vuex的getter来获取该状态对象中的数据，并将其传递给Vue组件中的模板。 2. 使用axios库：axios是一个流行的HTTP客户端库，可用于与后端接口进行通信。您可以使用axios库来发起请求并获取后端接口返回的数据。在Vue组件中，您可以使用axios的get()方法来发送GET请求，并在请求成功时获取返回的数据。 ```php axios.get('/api/data') .then(response => { // 处理返回的数据 this.$set(this.data, 'user', response.data) }) .catch(error => { // 处理错误 }) ``` 3. 使用Vue实例中的data属性：如果您只想在Vue组件内部使用数据，而不需要全局状态管理，那么可以直接在Vue实例的data属性中定义一个变量，用于存储从后端接口获取的数据。然后在模板中使用该变量来显示数据。 ```php export default { data() { return { userData: null } }, mounted() { fetch('/api/data') .then(response => response.json()) .then(data => { this.userData = data; }) } } ``` 在上述示例中，我们在Vue组件的mounted钩子中使用fetch API发起请求，并在请求成功时将返回的数据存储在组件的data属性中。然后在模板中使用该数据来显示数据。 这些方法都可以帮助您在Vue中获取后端接口返回的数据，具体使用哪种方法取决于您的应用程序需求和结构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值