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

修改代码

页面显示数据了

总结

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