js条件渲染【v-if】,【v-else】，【v-show】的用法和区别

 v-if  

用途：控制元素是否渲染

功能：v-if 是用来条件地渲染DOM元素的。它根据一个布尔表达式的值来决定是否渲染某个元素或组件。

特点： 

•  延迟渲染 ： 只有当条件满足时，元素才会被真正渲染出来。如果条件变化，Vue会重新渲染元素。
• 性能开销：  因为需要创建和销毁DOM元素，频繁切换可能会有较高的性能开销。

<template>

    <p v-if="isVisible">我是线条小狗</p>

    <button @click="toggleVisibility">切换提示</button>


</template>

<script setup> 
   
    import {ref}  from 'vue';
    
    const isVisible = ref(true); //默认显示

    //切换显示状态 ,点击这个按钮，不显示p标签的内容
    
    function toggleVisibility() {
       
      isVisible.value = ! isVisible.value;

    }
     


</script>

v-else

vue3模式

<template>
  <!-- v-if和v-else列题的展现 -->
  <p v-if="flag">我是小熊猫</p>
  <p v-else>我是小浣熊</p>
</template>

<script setup>
import { ref } from 'vue';

// 定义响应式变量
const flag = ref(false);    //我是小浣熊
</script>

vue2模式 

<template>
  <!-- v-if和v-else列题的展现 -->
  <p v-if="flag">我是孙猴子</p>
  <p v-else>我是小猴子</p>
</template>
<script >
export default {
 data(){
  return{
    flag:false
  }

 }



}


</script>

v-show

用途： 根据条件来控制元素的显示和隐藏

功能 :  v-show 是通过设置元素的display 样式来控制元素的显示和隐藏。元素市镇被渲染到DOM中，但通过修改display样式来决定是否显示。

特点：

• 总是渲染：元素总是被渲染到DOM中，只是通过CSS样式来隐藏或显示它。
• 性能优化:  对于频繁切换显示的情况，v-show 比 v-if 更高效，因为不需要销毁和重新创建DOM元素。

<template> 

    <div>
        <p v-show="showText">这是一个使用v-show 控制显示和隐藏的段落            </p>
        <button @click="toggleText">切换显示</button>
    </div>

</template>

<script setup>
        import {ref}  from 'vue';
        
        const showText = ref(true); // 初始状态为显示
        
        function toggleText() {
            showText.value = !showText.value;  //切换状态
        }
</script>


<style scoped> 

p  {
   color: blue;
   font-size:16px;


}

// showText 为 true 时,p 元素的 display 属性被设置为 block（或其他适合的显示值），使元素可见。

// showText 为 false 时,p 元素的 display 属性被设置为 none（或其他适合的显示值），使元素不可见。这会使元素隐藏在页面上，但是元素的占位符仍然存在于DOM中

</style>