【Vue】条件渲染（v-if有缓存功能，v-show没有）

微信订阅号：Rabbit_svip

Vue提供了v-if，v-else，v-show这几个指令来判断是否该输出指定的DOM元素。

本节目录

1. v-if 的用法
2. v-if 和 v-else 的配合
3. v-show 的用法
4. v-if 和 v-show 的区别（包括缓存部分）

---

v-if

v-if 指令可以完全根据表达式的值在DOM中生成或移除一个元素。
如果 v-if 表达式赋值为 false，那么对应的元素就会从DOM中 移除；
否则对应的元素将会被插入DOM中。

用法如下

<!--HTML 代码-->
<div id="app">
    <div v-if="yes">Yes</div>
</div>

/*JS代码*/
new Vue({
    el: '#app',
    data: {
        yes: true
    }
)}

当前 yes 为 true，所以 div 是显示的。如果为 false 就不显示了。

---

v-else

v-else 是要跟着 v-if 一起使用的。
else 也就字面意思。跟上面的 if 取反而已。

用法如下：

<!--HTML 代码-->
<div id="app">
    <div v-if="yes">Yes</div>
    <div v-else>No</div>
</div>

/*JS代码*/
new Vue({
    el: '#app',
    data: {
        yes: false
    }
)}

因为 yes 的值为 false，所以内容为 “No” 的div会显示，内容为 “Yes” 的div将会被移除。

注意，v-else 前一个元素，一定是设置了 v-if 的元素。
下面是错误写法：

<!--HTML 代码-->
<div id="app">
    <span v-if="yes">Yes</span>
    <br />
    <span v-else>No</span>
</div>

/*JS代码*/
new Vue({
    el: '#app',
    data: {
        yes: false
    }
)}

因为内容为 “No” 的 span 前面跟着的是
标签，这个标签没设置 v-if ，所以会报错。

微信订阅号：Rabbit_svip

---

v-show

v-show 的用法和 v-if 是差不多的。

<!--HTML 代码-->
<div id="app">
    <div v-show="yes">Yes</div>
</div>

/*JS代码*/
new Vue({
    el: '#app',
    data: {
        yes: true
    }
)}

但 v-else 是不能和 v-show 配合使用。如果需要做到 v-if 和 v-else 那样配合，可以用以下写法。

<!--HTML 代码-->
<div id="app">
    <div v-show="yes">Yes</div>
    <!--下面的div进行取反-->
    <div v-show="!yes">No</div>
</div>

/*JS代码*/
new Vue({
    el: '#app',
    data: {
        yes: true
    }
)}

---

v-if 和 v-show 的区别

【区别 1】展示方式不同。

v-if 是插入或移除元素，在html模板里是插入，或者不存在。

<!--HTML 代码-->
<div id="app">
    <div v-show="yes">Yes</div>
</div>

/*JS代码*/
new Vue({
    el: '#app',
    data: {
        yes: false
    }
)}

微信订阅号：Rabbit_svip

渲染出来后，完全看不到内容为 “Yes” 的 div 的踪影，只留下一个注释标签。

而用 v-show 的话是下图所示。

微信订阅号：Rabbit_svip

我们还能找到内容为 “Yes” 的 div，只是这个 div 设置了 display: none;

由此可看出，v-show 为 false 时，只是用 css 把指定元素隐藏而已。

【区别 2】<template>元素

<template>元素能帮我们把一组内容放到 <template> 这个根标签里。但浏览器不会渲染这个标签。

v-if 是可以和 <template> 标签配合使用的。但 v-show 不行。因为上面说了，浏览器不会渲染这个标签。所以根本不可能在这个标签上设置什么CSS样式。

【区别 3】缓存问题

v-if 是有缓存的。
v-show 没有缓存。

下面的例子是用 v-if

<!--HTML代码-->
<div id="app">
  <input type="text" v-if="write" class="inp1">

  <input type="text" v-else class="inp2">

  <button @click="write = !write">Change Input</button></div>

/*CSS代码*/
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  color: #fff;
}

.inp1 {
  border: 5px solid lightgreen;
}

.inp2 {
  border: 5px solid hotpink;
}

/*JS代码*/
new Vue({
  el: "#app",
     data: {
      write: false
  }
})

微信订阅号：Rabbit_svip

按了切换的按钮，input 的内容还是存在的。

如果用 v-show 的话，一切换内容就跟着切换了。
v-show 的写法可以自己试，这里提供我的代码连接

线上代码（可能要翻墙才能用）