美文网首页
vu e2.x内部指令

vu e2.x内部指令

作者: 微笑_1a7e | 来源:发表于2018-03-08 10:07 被阅读0次

1.v-if 是 Vue.js 定义的指令,书写在 HTML 中,控制元素的渲染与否,示例代码如下。

<div v-if="true">
  <p>内容</p>
</div>

当v-if为false时

<p>内容</p>不显现

2.v-show也是控制元素渲染与否

两者的区别:

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

简单来说如果用 v-show,你在元素审查的时候发现这个元素实际是存在的,不过它的 CSS 样式中的 display 被设置为了 none,而 v-if,在不满足的时候它并不会去渲染这个元素,是真实的不存在。

v-if 减少了整个页面的元素节点,但是如果存在经常切换显示与否的状态,就需要使用 v-show,因为重新渲染或者销毁元素的消耗会远远大于简单的 CSS 样式隐藏与显示。

相关文章

网友评论

      本文标题:vu e2.x内部指令

      本文链接:https://www.haomeiwen.com/subject/fofjfftx.html