Vue完成渲染前,document得不到未被渲染出现的标签。想操作这些标签,如为其中某个标签加入不同的样式,只能捕获到标签渲染结束后操作。
举例:
var currentFirstLevelServiceIndex = 0;
var firstLevelServiceArrayVue = new Vue({
el: '#firstLevelServiceArray',
data: {
firstLevelServiceArray: null
},
watch: {
firstLevelServiceArray: function() {
this.$nextTick(function() {
var firstLevelServiceItemLis = document.getElementById("firstLevelServiceArray").getElementsByTagName("li");
firstLevelServiceItemLis[currentFirstLevelServiceIndex].classList.add("selectedFirstLevelServiceItem");
})
}
}
});
firstLevelServiceArrayVue.firstLevelServiceArray = firstLevelServiceArrayValue;
注意:不能一开始就:
data: {
firstLevelServiceArray: firstLevelServiceArray
},
这样,firstLevelServiceArray的值firstLevelServiceArrayValue没有变化,不会被watch捕捉到变化,更没有渲染结束这个事件。