Vue：点击左侧导航栏访问接口渲染数据

已于 2023-04-19 15:54:05 修改
阅读量152 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-04-17 17:28:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48907405/article/details/130204740
版权

首先需要创建一个js文件在内部写一个方法调用接口

 页面Vue文件中引入

 from：js文件路径

{getFirmwareTypeRanking}：引入js文件中的方法集合，可以有多个逗号分隔

在methods中写一个函数调用引入的js方法

 因为是要进入此Vue时就调用接口，所以要在mounted中调用此函数 ，让它直接执行

 

接口返回数据所渲染位置

 

 使用循环遍历渲染数据

完工 

23G
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Vue调取接口,并渲染数据的示例代码
10-16
今天小编就为大家分享一篇使用Vue调取接口,并渲染数据的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用Vue来完成项目中的首页导航+左侧菜单
m0_62019369的博客
11-01 6513
页面上使用的面包屑，查询条件，表格，分页等空间，可以查看element-ui官网。该步骤主要关注页面布局，并没有绑定数据，编写完成后，观察页面效果。 BookList.vue:
vue实现点击头部标签页走缓存,点击左侧导航正常调接口
最新发布
m0_64603959的博客
09-22 196
这里直接拆成组件就可以，用到仓库是因为新增功能是新页面点击保存需要把新增的这个标签页去掉 首先需要注意的是keep-alive缓存的话多层路由不支持，需要处理路由,缓存主要是keep-alive的include属性。这是路由的内容，需要注意name需要和.vue文件里的name一致，要不缓存不生效，title是你在缓存的标签页展示的内容。
Vue3中动态渲染菜单栏（TS）
~
08-09 4923
。需求：左侧的菜单栏渲染数据从路由文件中获取并组织成我们想要的数据格式。此代码只适用一级菜单，多级菜单也是这个思路组织好数据然后再渲染。路由：router》index.ts。
Vue项目，菜单栏动态渲染
weixin_44866262的博客
10-19 2018
前两天做了vue项目的菜单栏的动态渲染，其实很简单，就是后端会传递给我菜单的图标，名称，跳转的路径以及路由跳转时做需要携带的参数。 但是后端传递给前端的数据中，前端在页面中做跳转的时候，他的携带的参数有问题，因为后端给的需要携带参数的数据是一个json对象，前端在做跳转的时候，直接将json中的数据携带到了地址栏，而前端需要用的参数其实是一个对象的某一个属性。 这时就需要做一转换的处理： 下面是后端传递过来的动态菜单的数据（一个为例）： { parent:null, code: null， creat
b站黑马Vue2后台管理项目笔记——（2）主页布局（整体，Header，左侧菜单布局）
weixin_72322475的博客
01-30 3268
总结b站黑马Vue2后台管理项目笔记——（2）主页布局（整体，Header，左侧菜单布局）
vue导航栏部分的动态渲染实例
10-16
今天小编就为大家分享一篇vue导航栏部分的动态渲染实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue实现点击导航栏当前标签后变色功能
10-14
在Vue.js中，实现点击导航栏当前标签后变色的功能是一项常见的需求，它能提供良好的用户体验，让用户清楚地知道当前所在页面。以下是如何利用Vue.js实现这一功能的详细步骤和相关知识点。 首先，我们需要在HTML模板...
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
10-14
总的来说，Vue 中实现导航锚点的平滑滚动和导航栏对应变化，主要是通过监听滚动事件、计算锚点位置以及平滑滚动到目标位置来完成的。这个过程涉及到DOM操作、事件处理以及数据绑定，是 Vue.js 开发中的基础技能。...
vue实现二级导航栏效果
10-16
主要为大家详细介绍了vue实现二级导航栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue后台主页左侧菜单的渲染 第三弹
lighting0_0的博客
04-25 642
Vue后台主页左侧菜单的渲染 1.主页的布局 1.首先我们要先下载element-ui vue add element ​ 我这里选择的是全部引入，大家可以根据要求进行选择 ​ 然后大家会发现，src目录下多了个plugins目录，里面有个element.js 2.使用布局容器布局 ​ 在这里我推荐使用以下这个官方布局方式，栗子： <el-container> <el-header>Header</el-header> <el-c
vue-element-admin根据后端返回，动态渲染左边菜单栏
m0_61702149的博客
06-10 2685
vue-element-admin左边菜单栏，根据后端返回，动态渲染
#vue# v-for渲染出导航栏
ZHENGCHUNJUN的博客
07-20 976
需求：制作一个导航栏 效果： 点击前： 点击后： 后端接口 思路： 在实际的开发里，一般不会写死导航栏的内容，然后为了更加动态以及高效修改导航栏的情况下，我们最好是用v-for进行渲染出来 （1）可以使用ul标签来写，通过flex进行布局（少用浮动，不要定宽度）然后在li 处，通过v-for进行循环渲染出来 （2）然后就要进行写点击事件了，从效果图以及后端返回的接口处，我们可以得知，我们需要点击时获取的内容是——导航名字以及状态（status），只要让点击时的stat..
vue 左侧菜单根据数据渲染成菜单
qq_39673475的博客
12-01 589
vue 左侧菜单根据数据渲染成菜单 <span slot=“title” v-if=“subItem.Url==‘OilProdPlat’|| subItem.Url==‘WaterRatePlat’” @click=“wellToggle(subItem)”>{{ subItem.ItemName }} {{ subItem.ItemName }} {{ threeItem.ItemName }} <el-menu-item v-else :index...
点击按钮访问接口返回的url,进行下载文件与跳转操作
weixin_45892086的博客
06-17 1394
点击按钮访问接口返回的url,进行下载文件与跳转操作 点击调用download()方法 就是创建a标签 设置a标签属性 添加a标签到页面中 点击a标签 移除a标签 下载示例 //res 是接口返回的数据 download = (res) => { let eleLink = document.createElement("a"); //设置样式为不可见 eleLink.style.display = "none"; //_blank表示在
按钮点击的接口
vickieyy的博客
05-08 1565
using UnityEngine; using UnityEngine.EventSystems; using System.Collections; /// 脚本位置：UGUI按钮组件身上 /// 脚本功能：实现按钮长按状态的判断 /// 创建时间：2015年11月17日 /// // 继承：按下，抬起和离开的三个接口 public class OnButtonA :...
点击a标签调用接口_接口测试平台代码实现58首页重构6
weixin_31774171的博客
01-20 1114
在本节开始之前，让我们来处理上节课小伙伴反馈的一个现象级问题：就是进入首页后，这个接口测试平台的欢迎语能不能别删，不然都不知道这是干啥的平台，这里却是我之前疏忽了，所以本节我们先加上。打开home.html：在body内的最顶部 写个h2标题即可，大家可以自己多设计设计，美观美观好，我们开始今天主要内容 ...
左侧菜单栏的渲染（v-for）
qq_45780380的博客
03-26 514
左侧菜单栏的渲染（v-for） 代码： <el-aside width="200px"> <el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b"> <!-- 一级菜单--> <el-submenu :index
vue修改表格数据导航栏实时更新
09-06
Vue可以通过响应式数据的机制来实现表格数据导航栏的实时更新。 首先，在Vue组件中，我们需要定义一个data数据对象，用来存储表格数据和导航栏的相关信息，并且将该数据对象设置为响应式。例如： ```javascript data() { return { tableData: [], // 表格数据 navigationBar: '', // 导航栏信息 } }, ``` 然后，在页面上展示表格和导航栏的地方，我们可以使用Vue的指令和数据绑定来进行展示和更新。例如： ```html <!-- 表格 --> <table> <tr v-for="item in tableData"> <td>{{ item }}</td> </tr> </table> <!-- 导航栏 --> <div>{{ navigationBar }}</div> ``` 接下来，我们需要使用Vue的方法或者生命周期钩子来获取或更新表格数据，并实时更新导航栏。 例如，在组件初始化时，我们可以通过生命周期钩子`created`来获取表格数据，并更新导航栏。代码如下： ```javascript created() { // 获取表格数据，并更新导航栏 this.getTableData(); this.updateNavigationBar(); }, methods: { async getTableData() { // 使用异步方法获取表格数据 this.tableData = await fetchData(); }, updateNavigationBar() { // 更新导航栏 this.navigationBar = '表格数据总数为：' + this.tableData.length; }, }, ``` 在上述代码中，`getTableData`方法使用了异步方法`fetchData`来获取表格数据，并将获取到的数据赋值给`tableData`变量。然后，调用`updateNavigationBar`方法来更新导航栏的内容，内容为当前表格数据的总数。 当表格数据发生变化时，可以在相应的地方调用`updateNavigationBar`方法来更新导航栏的内容，以保持导航栏的实时更新。 综上所述，通过使用Vue的响应式数据机制和相关的方法或生命周期钩子，我们可以实现表格数据导航栏的实时更新。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值