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 方式看看能不能解决

修改代码

页面显示数据了

总结

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

您可能感兴趣的文章:

rollup打包vue组件并发布到npm的方法
这篇文章主要介绍了rollup打包vue组件并发布到npm,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-05-05
解决echarts中横坐标值显示不全(自动隐藏)问题
这篇文章主要介绍了解决echarts中横坐标值显示不全(自动隐藏)问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue如何在多个不同服务器下访问不同地址
这篇文章主要介绍了vue如何在多个不同服务器下访问不同地址，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue实现组件之间传值功能示例
这篇文章主要介绍了vue实现组件之间传值功能,结合实例形式分析了vue.js父子组件之间相互传值常见操作技巧,需要的朋友可以参考下
2018-07-07
Vue3中配置404路由及懒加载的解决过程
这篇文章主要介绍了Vue3中配置404路由及懒加载的解决过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-04-04
详解vue中移动端自适应方案
这篇文章主要介绍了vue移动端自适应，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue 实现全选全不选的示例代码
本篇文章主要介绍了vue 实现全选全不选的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
手把手带你封装一个vue component第三方库
这篇文章主要介绍了手把手带你封装一个vue component第三方库，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-02-02
vue实现搜索小功能
这篇文章主要为大家详细介绍了vue实现搜索小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
vue的$http的get请求要加上params操作
这篇文章主要介绍了vue的$http的get请求要加上params操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11