Vue 条件渲染指令

爱被打了一巴掌 2022-05-19 02:00 261阅读 0赞

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

运行程序：  
![这里写图片描述][70]

然后，我们点击按钮进行切换：  
![这里写图片描述][70 1]  
![这里写图片描述][70 2]

我们试着在输入框内输入内容，进行切换：  
![这里写图片描述][70 3]  
切换后：  
![这里写图片描述][70 4]

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

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

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

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

运行程序：  
![这里写图片描述][70 5]  
切换：  
![这里写图片描述][70 6]

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

另外要提的是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>

运行程序：  
![这里写图片描述][70 7]

我们查看下dom结构：  
![这里写图片描述][70 8]

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

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

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

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

[70]: /images/20220519/03d9c2407b874c7681da9a685706a783.png
[70 1]: /images/20220519/1505d1808f964ad285f2635998e21caf.png
[70 2]: /images/20220519/c1d00b01a9e943018d16fd1aead836cd.png
[70 3]: /images/20220519/b45dbcc72a4447dd9b70ebfafef7e439.png
[70 4]: /images/20220519/519679bd6eec4092a8730766409313c7.png
[70 5]: /images/20220519/80d6acbf08de41648a0068d0e619b166.png
[70 6]: /images/20220519/f37a81b26cf046a6b1b41eca6f27a9ff.png
[70 7]: /images/20220519/4c095630b5674993ab9680eb6c45dc8b.png
[70 8]: /images/20220519/ac49e6924a2b4768b6b903b8f266a1a5.png