vue基础五

条件渲染

1.v-if

1.1<template>中v-if条件组

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

<template v-if="ok">

<h1>Title</h1>

<p>Paragraph 1</p>

<p>Paragraph 2</p>

</template>

1.2v-else

可以用 v-else 指令给 v-if 添加一个 “else” 块。

<div v-if="Math.random() > 0.5">

　　Sorry

</div>

<div v-else>

　　Not sorry

</div>

1.3v-else-if

与 v-else 相似,，v-else-if 必须跟在 v-if 或者 v-else-if之后。

1.3.1使用key控制元素的可重用

Vue 尝试尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 更快之外还可以得到一些好处。如下例，当允许用户在不同的登录方式之间切换:

<template v-if="loginType === 'username'">

<label>Username</label>

<input placeholder="Enter your username">

</template>

<template v-else>

<label>Email</label>

<input placeholder="Enter your email address">

</template>

在代码中切换 loginType 不会删除用户已经输入的内容，两个模版由于使用了相同的元素，<input> 会被复用，仅仅是替换了他们的 placeholder。

这样也不总是符合实际需求，所以 Vue 提供一种方式让你可以自己决定是否要复用元素。你要做的是添加一个属性 key，key 必须带有唯一的值。

<template v-if="loginType === 'username'">

<label>Username</label>

<input placeholder="Enter your username" key="username-input">

</template>

<template v-else>

<label>Email</label>

<input placeholder="Enter your email address" key="email-input">

</template>

注意, <label> 元素仍然会被复用，因为没有被添加了 key 属性。

1.4v-show

v-show 是简单的切换元素的 CSS 属性 display 。注意： v-show 不支持 <template> 语法。

1.5v-if vs v-show

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

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。