Vue中手动销毁DOM(组件)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
Vue中手动销毁DOM(组件)
在项目中,有时候需要手动销毁dom并重新创建dom,可以使用如下方法:
HTML
<template>
<!-- 需要销毁的dom -->
<div v-if="destroy"></div>
<!-- 同普通的dom,组件也是一样 -->
<component-name v-if="destroy"></component-name>
</template>
JavaScript
<script>
export default {
name: 'HelloWorld',
data () {
return {
destroy: true
}
},
methods: {
destroyDom: function() {
this.destroy = false
this.$nextTick({
this.destroy = true
})
}
}
}
</script>
销毁dom直接利用vue的v-if实现就行了,v-if
为false
时,dom会被移除,true
时会被添加重新渲染
注意:this.nextTick(callback)
会在DOM更新后回调
GitHub 加速计划 / vu / vue
207.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)