美文网首页
Vue-条件渲染

Vue-条件渲染

作者: 上山走18398 | 来源:发表于2019-10-29 22:25 被阅读0次

指令

v-if  是一个指令,必须将他添加到一个元素上

v-else

v-else-if

用key管理可复用的元素

v-show

v-if vs v-show

v-if && v-for

1. v-if

v-if 指令用于条件性地渲染这一块的内容。只在表达式返回truthy值的时候被渲染

2. 在<template>元素上使用v-if条件渲染分组

v-if 是一个指令,必须将他添加到一个元素上,但是如何在多个元素之间切换呢

3. v-else

v-else元素必须紧跟在带v-if 或者 v-else-if 的元素后面,否则它将不会被识别

4. 用key管理可复用的元素

Vue提供了一种方式来表示“这两个元素是完全独立的,不要复用他们”,只需添加一个具有唯一属性值key即可。

5. v-show

用于根据条件展示元素的选项;

```

<h1 v-show = "ok">Hello!</h1>

// 带有v-show的元素始终会被渲染并保留在DOM中。

// v-show只是简地切换元素css属性display

//v-show ,不支持<template>元素,也不支持v-else

```

6. v-if vs v-show

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

v-if 也是惰性的;初始渲染条件为假时,则什么也不做--直到条件第一次变为真,才会渲染

一般来说,v-if 有更高的切换开销,而v-show有更高的初始渲染开销,

如果需要频繁地切换,则使用v-show

如果在运行时条件很少改变,则使用v-if更好

7. v-if 与 v-for 一起使用

 不推荐同时使用 v-if 和 v-for

相关文章

  • Vue-条件渲染

    指令 v-if是一个指令,必须将他添加到一个元素上 v-else v-else-if 用key管理可复用的元素 v...

  • 条件渲染

    条件渲染