Vue.js 条件渲染全解析

注意标题是条件渲染而不是条件判断。Vue给v-if这类条件判断属性取名叫条件渲染。这些属性的目的是判断要不要渲染这些元素，而不仅仅是所谓的判断，是否渲染才是最主要的功能。

v-if的使用

例如下面的代码，span里面可以显示message的信息，但是我们添加了一个v-if属性并且设置值为false，这样message就不显示了。如果设置为true，就又显示了。

注意，如果为false，那么span元素根本就不会添加到dom里面。并不是简单的隐藏。

<div id="box">
     <span v-if="false">{{message}}</span>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#box",
        data: {
            message:"hello"
        },
        methods: {}
    })
</script>

当然直接写值不太好，我们可以在data里面定义变量来控制，v-if的值。

<div id="box">
     <span v-if="isShow">{{message}}</span>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#box",
        data: {
            message:"hello",
            isShow:true
        },
        methods: {}
    })
</script>

v-else的使用

v-else可以配合v-if使用。实现的效果是两者只会渲染其中一个，也就是只有一个显示会添加到dom中。

<div id="box">
     <span v-if="isShow">{{message}}</span>
     <span v-else>This is new message</span>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#box",
        data: {
            message:"hello",
            isShow:false
        },
        methods: {

        }
    })
</script>

v-if和v-else只能使用在同级元素上，也就是兄弟元素上。如果写成下面这种样子，会直接报错。v-else找不到配对的if。

<div id="box">
      <div v-if="isShow">
          <span>1</span>
          <span>2</span>
          <span v-else>3</span>
      </div>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#box",
        data: {
            message:"hello",
            isShow:false
        },
        methods: {

        }
    })
</script>

当内容比较多的时候，可以外层包裹一个div,然后把条件渲染写在这个div上面。这个div是多余的，有时候可能正好有一个外层div给你用，没有是话，只能自己凭空添加一个。在Vue2只能这样做。到Vue3的时候，提供了template元素来解决这个问题。

<div v-if="true">
     <p>welcome!</>
     <span >{{message}}</span>
</div>
<div v-else>
     <p>welcome!</>
     <span >没有消息</span>
</div>

template元素的使用

template元素是vue3才有的新功能。目的就是为了解决条件渲染的时候有时候需要凭空给外层套一个div的问题。template元素在dom渲染的时候，不会生成任何元素，起到和div一样的作用，但没有添加新元素而影响性能。

<template v-if="true">
     <p>welcome!</>
     <span >{{message}}</span>
</template >
<template v-else>
     <p>welcome!</>
     <span >没有消息</span>
</template >

v-else-if的使用

最经典的例子，没什么好说的。一般是不会这样写的，因为非常的麻烦，所以这个属性是非常少用的，写成这样还不如在函数里面写。

<div id="box">
      <div v-if="isShow">
          <span v-if="score>=90">优秀</span>
          <span v-else-if="score>=80">良好</span>
          <span v-else-if="score>=60">及格</span>
          <span v-else>不及格</span>
      </div>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#box",
        data: {
            message:"hello",
            isShow:true,
            score:90
        },
        methods: {

        }
    })
</script>

登录切换的小案例

没什么好说的，非常的简单。存在的问题是，每次切换后，原来的内容消失了。

<div id="box">
      <span v-if="useName">
          <label for="username">用户名</label><input type="text" id="username" placeholder="输入用户名"/>
      </span>
    <span v-else>
          <label for="mail">邮箱</label><input type="text" id="mail" placeholder="输入邮箱"/>
    </span>
      <button @click="useName=!useName">切换类型</button>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#box",
        data: {
            useName:true
        },
        methods: {
        }
    })
</script>

切换登录存在的问题

如果你在输入框输入内容123，点击切换按钮，你会发现原来的内容123还是存在的。这是vue的复用优化导致的。
因为这两个input按钮功能是类似的，vue并不是直接显示这两个input。如果你打开控制台，你会发现，第二个input根本就没有显示，而是直接修改第一个input来实现的。这是vue出于复用考虑而进行的优化。这是很合理的。
但是，问题怎么解决呢？vue为我们提供了key属性，你可以为两个input设置不同的key，这样vue发现key不同，就不会给我们自动复用了。

<div id="box">
      <span v-if="useName">
          <label for="username">用户名</label>
          <input type="text" id="username" placeholder="输入用户名" key="username"/>
      </span>
    <span v-else>
          <label for="mail">邮箱</label>
        <input type="text" id="mail" placeholder="输入邮箱" key="mail"/>
    </span>
      <button @click="useName=!useName">切换类型</button>
</div>

v-show

v-show和v-if实现的效果都是一样的，唯一的区别的就是v-show是通过设置display:none来实现不显示的，而v-if为false的时候，元素根本就没有添加到dom里面。
v-show适合那种需要频繁显示隐藏的场合。
v-if因为会频繁添加删除元素，开销比较大。但因为元素可能被删除或者没渲染，内存占用少。
如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

v-show 不支持在 元素上使用，也不能和 v-else 搭配使用。

<body>
<div id="box">
       <span v-if="isShow" id="aaa">{{message}}</span>
       <span v-show="isShow" id="bbb">{{message}}</span>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#box",
        data: {
            message: "hello",
            isShow:false
        },
        methods: {}
    })
</script>