vue控制元素的显示和隐藏

Vue通过条件渲染指令可以控制元素的显示和隐藏。常见的条件渲染指令有v-if、v-else-if和v-else。

在模板中，我们可以使用v-if指令来根据数据的真假值进行条件渲染，如果为true就渲染该元素，否则就不渲染。例如：

<template>
  <div>
    <p v-if="isShow">这是要显示的内容</p>
  </div>
</template>

当isShow属性为true时，就会把`<p>`元素渲染出来，否则就不会显示。

v-else-if指令和v-else指令可以实现多个条件的选择渲染。例如：

<template>
  <div>
    <p v-if="isShow">这是要显示的内容</p>
    <p v-else-if="isShow2">这是第二个要显示的内容</p>
    <p v-else>这是要隐藏的内容</p>
  </div>
</template>

当isShow属性为true时，就会把第一个`<p>`元素渲染出来；当isShow2属性为true时，就会把第二个`<p>`元素渲染出来；当前两个属性都为false时，就会把第三个`<p>`元素渲染出来。

此外，我们还可以使用v-show指令来实现元素的显示和隐藏。和v-if不同的是，v-show不是通过添加和删除DOM节点来实现的，而是通过修改CSS属性display的值来控制元素的显示和隐藏。例如：

<template>
  <div>
    <p v-show="isShow">这是要显示的内容</p>
  </div>
</template>

当isShow属性为true时，就会把`<p>`元素显示出来；当isShow属性为false时，就会把`<p>`元素隐藏起来。需要注意的是，v-show指令不支持v-else-if和v-else指令。