如何利用Vue.js库中的v-if内部指令判断元素显示

Question

如何利用Vue.js库中的v-if内部指令判断元素显示

Answer 1

在 Vue.js ，使用 v-if 指令判断元素显示

1 2	<h1 v-if="ok">Yes</h1> <!-- 当ok为true时，该元素显示，否则不显示-->

在 <template> 中配合 v-if 条件渲染一整组

因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果想切换多个元素，此时可以把一个 <template> 元素当做包装元素，并在上面使用 v-if。最终的渲染结果不会包含 <template> 元素。

1 2 3 4 5

<template v-if="ok">       <h1>Title</h1>       <p>Paragraph 1</p>       <p>Paragraph 2</p> </template>

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

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

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

一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

 

Answer 2

1 2 3 4 5 6

<div id="example01">  <p v-if="male">Male</p>  <p v-if="female">Female</p>  <p v-if="age>25">Age:{{age}}</p>  <p v-if="name.indexOf('lin')>0">Name:{{name}}</p> </div>

当age大于25时，Age那一行显示，否则不进行显示

当name包含'lin'时，显示该行，否则不显示