vue.js2.0学习(四)条件渲染

一. 条件渲染

v-if
该指令的会用类似于js中的if语句
例如:
<h1 v-if="awesome">你好</h1>
只有当awesome为true时,才会渲染<h1>标签

v-else
用法也同if…else…类似
但是v-else元素必须紧跟在带v-if或者v-else-if的元素后面
例如:

<h1 v-if="awesome">你好</h1>
<h2 v-else>hello!!</h2>

当awesome为false的时候,会渲染<h2>标签

v-else-if
用法同js的if…else if…else类似
注意v-else-if必须紧跟在带v-if或者v-else-if的元素之后

目前我们使用v-if都是把它添加到一个元素上,当我们想切换多个元素的时候,我们可以使用<template>元素把元素包裹起来,最终的渲染结果不会包括<template>元素
例子:

<template v-if="ok">
  <h1>您好:</h1>
  <p>我是....</p>
  <p>...........</p>
</template>

用key管理元素的复用
这里借用官网的例子:

<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>

上面的例子中没有在input元素上添加key属性,当我们切换他们的时候会发现文本框里的内容没有被清除
这是因为两个模板使用了相同的元素input,在进行切换时input不会被替换掉-----仅仅是替换了它的placeholder属性

v-show
该指令的用法同v-if大致一样
但是不同的地方是带有v-show的元素始终会被渲染并保留在DOM中(动态切换display)

注意:v-show不支持<template>元素

v-if VS v-show
v-if是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建
v-if是惰性的,如果初始渲染条件为假,则它什么也不会做,知道条件第一次变为真时

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

v-if:有更高的切换开销,适合在运行时条件很少改变时用
v-show:有更高的初始渲染开销,适合需要非常频繁切换时用