Vue 条件渲染指令

和JavaScript的条件语句一样，vue的条件指令可以根据表达式的值在dom中渲染或者销毁元素/组件,常用的条件指令有：

• v-if
• v-else-if
• v-else

其中v-if可以单独使用，v-else-if必须紧跟v-if，v-else必须紧跟v-else-if或者v-if。当表达式的值为true时，当前元素/组件及所有的子节点都将会被渲染，反之被移除。

如果一次判断的是多个元素或组件，那么可以在元素上使用条件指令，最终渲染的结果不会包含该元素。

让我们看个实例：

<!--条件渲染指令示例-->
<template>
  <div>
    <template v-if="inputType === 'name'">
      <label>用户名：</label>
      <input placeholder="请输入用户名"/>
    </template>
    <template v-else-if="inputType === 'mail'">
      <label>邮箱：</label>
      <input placeholder="请输入邮箱"/>
    </template>
    <template v-else>
      <label>手机号码：</label>
      <input placeholder="请输入手机号码"/>
    </template>
    <button @click="changeInputType">切换输入类型</button>
  </div>
</template>

<script>
  export default {
    name: "ConditionalRender",
    data() {
      return {
        inputType: 'name'
      }
    },
    methods: {
      changeInputType: function () {
        if (this.inputType === 'name') {
          this.inputType = 'mail';
        }
        else if (this.inputType === 'mail') {
          this.inputType = 'phone';
        }
        else {
          this.inputType = 'name';
        }

      }
    }
  }
</script>

<style scoped>
  label {
    font-weight: bold;
  }

  button {
    margin-left: 10px;
  }
</style>

运行程序：

然后，我们点击按钮进行切换：

我们试着在输入框内输入内容，进行切换：

切换后：

我们可以发现，输入框的内容没有发生变化，还是我们刚开始输入的姓名。按照我们的猜测，切换后，输入框应该是对应的placeholder内容。

这里设计到vue的渲染机制，在渲染元素的时候，vue出于效率的考虑，会尽可能的复用已有的元素而非重新进行渲染，所以我们就会发现上面的现象，也就是说input元素被复用了。

那么，如果我们不希望vue复用这些元素，我们可以使用vue提供的key属性，它可以让我们自己决定是否复用元素，注意一点：key值必须是唯一的。

我们修改上面的代码，为input元素添加key属性：

<template v-if="inputType === 'name'">
      <label>用户名：</label>
      <input placeholder="请输入用户名" key="name-input"/>
    </template>
    <template v-else-if="inputType === 'mail'">
      <label>邮箱：</label>
      <input placeholder="请输入邮箱" key="mail-input"/>
    </template>
    <template v-else>
      <label>手机号码：</label>
      <input placeholder="请输入手机号码" key="phone-input"/>
    </template>

运行程序：

切换：

好了，是不是和我们要求的一样了呢。

另外要提的是v-show指令，该指令是改变元素的css属性display。当v-show为true时，元素会显示，为false时，元素会隐藏，dom结构中会给元素加上内联样式：display:none;.

示例：

<label v-show="true">我是v-show=true</label>
<label v-show="false">我是v-show=false</label>

运行程序：

我们查看下dom结构：

大家可以看到，确实和我们上面说的一样，当v-show值为false的时候，添加了display：none;的内联样式。

那么v-if和v-show两者都具有类似的功能，我们到底该选择使用哪个呢？

v-show只是简单的css属性切换，无论其值如何，都会被编译，相比v-show，v-if只有在条件第一次变为真的时候才开始编译。

v-if更适合条件不经常改变的场景，应为通过v-if进行切换开销比较大，当你要频繁进行显示隐藏的切换时显然v-show更加适合。