html：
<div id="div" v-if="showDiv">这是一段文本</div>
<button @click="getText">获取div内容</button>
js：
data: {
showDiv: false
},
methods: {
getText: function() {
this.showDiv = true;
会抛出一个错误： cannot read property 'innerHTML' of null;这里涉及到一个重要的概念： 异步更新队列。
Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后，在下一个事件循环tick中，Vue刷新队列并执行实际工作。
／／直接取报错，还没有创建div，如果不是v-if 是 v-show的话，不报错
／／ var text = document.getElementById('div').innerHTML;
／／ console.log(text);
// 等待dom更新完成后执行回调
this.$nextTick(function() {
var text = document.getElementById('div').innerHTML;
console.log(text);
});
}
}
实际使用遇到的bug：
elemntUI的分页在ie下跳转至——页 ，前端分页时 只能执行一次，后面修改页数 不更行dom
<el-pagination @size-change="handleSizeChange" @current-change="currentChange" :current-page="page" :page-size="1" layout="prev, pager, next, jumper" :total="total" :key="timeStrap"> </el-pagination>
return{
page:1,
timeStrap:'',
}
methods:{
currentChange(currentPage){
this.page=currentPage;
this.$nextTick(()=>{this.timeStrap=new Date().getTime();})
}
outterTabClick(tab){
}
this.page=1;
this.$emit('update:activeName',tab.name)
},
innerTabClick(){
}
this.page=1;
}
},
computed:{
index(){ return this.page-1;},
activeNameModel:{
get(){
return this.activeName;
},
set(val){//子组件传父组件语法糖update
this.$emit('update:activeName',val)
}
},
distrustIncItem(){
if(this.distrustIncList){
return this.distrustIncList.length?(this.distrustIncList[this.index]?this.disrusIncList[this.index]:{}):{};
}
return {};
},
total(){
if(this.activeName==='first'){return this.distrustIncList.length?this.distruIncList.length:0;}else if(this.activeName==='second'){
if(this.activeHireName==='hirerJudgeDocs'){return this.hirerJudgeDocsListCount;}else if(this.activeHireName=='hirerSessionDocs'){return this.hirerSessionDocsListCount;}else if(this.activeName==='third'){
if(this.activeOtherName==='judgeDocs'){return this.judgeDocsListCount;}else if(this.activeOtherName==='executedInc'){
return this.extcutedIncListCount;
}else if(this.activeOtherName==='sessionDocs')){return this.sessionDocs'ListCount;}else if(this.activeOtherName==='noti ceDocs')){return this.noticeDocsListCount;}
}
}
}
}