vue获取不到元素正确的offsetHeight
vue页面渲染完成后根据获取到的数据来决定操作某个DOM元素想实现的效果:如果获取到的文本数据所占用的高度小于87px,则不显示展开这个按钮,反之则展示html<div><p id="idu">简介:<span type="text" v-html="introduce"></span></p><div><a v-if=
·
vue页面渲染完成后根据获取到的数据来决定操作某个DOM元素
想实现的效果:如果获取到的文本数据所占用的高度小于87px,则不显示展开这个按钮,反之则显示
html
<div>
<p id="idu">简介:
<span type="text" v-html="introduce"></span>
</p>
<div>
<a v-if="ishow">{{message}}</a>
</div>
</div>
js
data(){
return {
playlistArr:{},
message:'展开',
//控制是否显示
ishow:false,
}
},
created(){
//获取数据
var id= this.$route.query.id;
_Playlist(id).then(res=>{
this.playlistArr = res.data.playlist;
})
},
watch:{
//当数据成功获取后playlistArr改变,执行以下代码
playlistArr:function(){
this.$nextTick(()=>{
var h = document.getElementById("idu").offsetHeight;
if(h>87){
//显示message
this.ishow = true;
}
else{
//不显示message
this.ishow = false;
}
})
}
},
//计算属性
computed:{
//introduce是从playlistArr中取出来的
introduce(){
let introduce = this.playlistArr.description.replace(/\n/g,"<br>");
return introduce;
}
}
playlistArr是异步获取的数据
v-html=“introduce” introduce是从playlistArr中获取到的,所以watch里面数据绑定playlistArr也一样
this.$nextTick()是在DOM更新完成后使用它,这样才能通过document.getElementById(“idu”).offsetHeight 获取正确的数据
更多推荐
已为社区贡献1条内容
所有评论(0)