跳至主要內容

v-show 条件渲染指令


v-show 条件渲染指令

v-show指令的基本用法与v-if类似,其也是通过设置条件的值的真假来决定元素的渲染情况的。

v-if不同的是,v-show并不支持template模板,同样也不可以和v-else结合使用。

此外,v-show指令的渲染逻辑只是一种视觉上的条件渲染。无论v-show指令设置的条件是真或是假,当前元素都会被渲染,v-show指令只是通过切换元素的CSS样式中的display属性来展示实现效果。

v-show demo
<template>
  <div style="text-align: center;">
    <h1 v-show="show">v-show为true</h1>
    <h1 v-show="showFalse">v-show为false</h1>
  </div>
</template>
<script>
export default {
  data(){
      return{
        show: true,
        showFalse: false
      }
  },
};
</script>
上次编辑于:
贡献者: Neil