vue mounted()函数中无法定义初始化样式的原因分析

更新时间：2024年03月01日 09:21:06 作者：VIVI Xiao

这篇文章主要介绍了vue mounted()函数中无法定义初始化样式的原因分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

mounted()函数中无法定义初始化样式的原因

基于vue框架

在mounted()函数中，初始化某一个元素的css样式，发现无法成功。

解决办法

使用nextTick

this.$nextTick()函数作用是等页面的数据更新完成以后，它再执行内部回调函数中的逻辑

参考如下：

<div>
   <span ref="red">我需要初始化颜色</span>
</div>

new Vue({
  el: '#app',
  mounted: function () {
    this.init()
  },
  methods: {
    init() {
        this.$nextTick(() => {
        this.$refs.red.style.color = 'red'
        })
    }
  }  
})

mounted初始化的问题

作为一个希望从事后端多人学习前端还是有点抽象

今天使用vue遇到一个问题

mounted 不能初始化同步方法了

先看下配置信息

上图

本地json文件(还需要防止中文空格)

页面访问不到数据

改下代码看一下console

发现没有读取到数据，我的猜测是

mounted初始化没等到this.$http.get().then()方法执行完成 mounted初始化就执行结束了.

试试 async 和 await 方式看看能不能解决

修改代码

页面显示数据了

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Axios代理配置及封装响应拦截处理方式
这篇文章主要介绍了Axios代理配置及封装响应拦截处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue实现快捷键录入功能的示例代码
有的时候项目需要在页面使用快捷键，而且需要对快捷键进行维护。本文将为大家展示Vue实现快捷键录入功能的示例代码，感兴趣的可以了解一下
2022-04-04
vue2.0+webpack环境的构造过程
本文分步骤给大家介绍了vue2.0+webpack环境的构造过程的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-11-11
Vue中xlsx的使用方法指南
这篇文章主要给大家介绍了关于Vue中xlsx的使用方法指南,有很多办法都可以实现,其中最简单的还是使用插件xlsx,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2023-07-07
vue3使用vue-router嵌套多级路由的方法
Vue3 嵌套路由的使用和 Vue2 相差不大,主要的区别是 Vue3 的路由实例化使用了 createApp() 方法,所以实例化路由时需要传入根组件,这篇文章主要介绍了vue3使用vue-router嵌套路由(多级路由),需要的朋友可以参考下
2023-12-12
解决Vue3 echarts v-show无法重新渲染的问题
这篇文章主要介绍了Vue3 echarts v-show无法重新渲染的问题,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-09-09
Vue中实现动态更新JSON数据的三种方式
在 Vue 项目中动态更新 JSON 数据,可以通过以下几种方式实现,具体方法取决于你的需求,比如数据是存储在前端还是后端、是否需要持久化等,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
2025-04-04
Vue3的效率提升主要表现在哪些方面示例解析
Vue3带来了许多性能优化和效率提升的特性，本文将重点讨论Vue3在静态提升、预字符串化、缓存事件处理函数、Block Tree和PatchFlag方面的改进，我们将通过对比Vue2和Vue3的编译结果来说明这些方面的效率提升
2023-12-12
vue.js项目打包上线的图文教程
下面小编就为大家分享一篇vue.js项目打包上线的图文教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-11-11
vue使用csp的简单示例
Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用,下面这篇文章主要给大家介绍了关于vue使用csp的相关资料,需要的朋友可以参考下
2022-08-08