vue数据没有获取到

Question

用v-if判断commends.length 就显示el没有获取到，是什么原因啊
代码如下：

<div class="recommend">
    <div class="recommend-content">
        <div v-if="recommends.length" class="slider-wrapper">
            <slider>
                <div v-for="item in recommends">
                    <a :href="item.linkUrl">
                        <img :src="item.picUrl" alt="">
                    </a>
                </div>
            </slider>
        </div>
        <div class="recommend-list">
            <h1 class="list-title">热门歌单推荐</h1>
            <ul></ul>
        </div>
    </div>
</div>

js代码

export default {
  data() {
    return {
      recommends: []  //这里应该有值的啊
    };
  },
  created() {
    this._getRecommend();
  },
  methods: {
    _getRecommend() {
      getRecommend().then(res => {
        if (res.code === ERR_OK) {
          console.log(res.data.slider);
          this.recommends = res.data.slider;
        }
      });
    }
  },
  components: {
    Slider
  }
};

封装方法

 export function addClass(dom, className){
        if(hasClass(ele,className)){
            return 
        }
        let newClass = ele.className.spilt(' ');
        newClass.push(className);
        ele.className = newClass.join(' ');
    }
    
    export function hasClass(ele, className){
        let reg = new RegExp('(^|\\s)'+className+'(\\s|$)');
    
        return reg.test(ele.className)
    }

Answer 1

export function addClass(dom, className){
        if(hasClass(dom,className)){ // 这里应该是dom，不是ele
            return 
        }
        let newClass = dom.className.spilt(' ');
        newClass.push(className);
        dom.className = newClass.join(' ');
    }
    
    export function hasClass(ele, className){
        let reg = new RegExp('(^|\\s)'+className+'(\\s|$)');
    
        return reg.test(ele.className)
    }

Answer 2

生命周期图示
created:挂载没开始，$el属性不可见

Answer 3

如果要获取dom，那么你不能用v-if要用v-show，使用v-if的话，整个v-if的dom都不会出现在document中的，所以如果你要获取dom的话切忌不能用v-if而是要用v-show

Answer 4

方法封装在 methods内