vue条件渲染指令有哪些

这篇文章主要介绍“vue条件渲染指令有哪些”，在日常操作中，相信很多人在vue条件渲染指令有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue条件渲染指令有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联公司是一家专业提供鄂伦春企业网站建设,专注与成都做网站、网站建设、外贸营销网站建设、HTML5、小程序制作等业务。10年已为鄂伦春众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

vue条件渲染指令包括v-if、v-else、v-else-if、v-show。v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回真值时才被渲染；v-else可以为v-if添加一个“else 区块”，v-else-if可以为v-if添加一个“else if 区块”。v-show根据一个条件决定是否显示元素或者组件，依赖于控制display属性。

条件渲染

• 在某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断了。

• Vue提供了下面的指令来进行条件判断：

• v-if

• v-else

• v-else-if

• v-show

下面我们来对它们进行学习。

v-if、v-else、v-else-if

• v-if、v-else、v-else-if用于根据条件来渲染某一块的内容：

• 这些内容只有在条件为true时，才会被渲染出来；

• 这三个指令与JavaScript的条件语句if、else、else if类似；

  v-if 指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回真值时才被渲染。

  v-else 可以为 v-if 添加一个“else 区块”。

  v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用。

• v-if的渲染原理：

• v-if是惰性的；

• 当条件为false时，其判断的内容完全不会被渲染或者会被销毁掉；

• 当条件为true时，才会真正渲染条件块中的内容；

template元素

• 因为v-if是一个指令，所以必须将其添加到一个元素上：

• 但是如果我们希望切换的是多个元素呢？

• 此时我们渲染div，但是我们并不希望div这种元素被渲染；

• 这个时候，我们可以选择使用template；

• template元素可以当做不可见的包裹元素，并且在v-if上使用，但是最终template不会被渲染出来：

• 有点类似于小程序中的block

下面来通过例子好好了解v-if、v-else、v-else-if三个指令。

v-if

前面说到过v-if根据表达式来的值来判断在DOM中生成元素。比如：

    v-if的值为true时，显示这个div元素