vue指令_v-show和v-if / 标签的隐藏和出现 / v-else

最新推荐文章于 2022-09-15 10:07:11 发布

Henry_ww

最新推荐文章于 2022-09-15 10:07:11 发布

阅读量437

点赞数

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/Henry_ID/article/details/118614161

版权

vue 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue中的v-show和v-if指令，用于控制元素的显示和隐藏。v-show通过改变CSS的display属性实现隐藏，适合频繁切换；v-if则会直接从DOM中移除元素，适用于不经常切换的情况。同时提到了v-else的使用，可以实现条件展示的互斥。示例代码展示了如何根据变量控制两个h1元素的显示状态，以及v-if和v-else在同一条件下的应用。

摘要由CSDN通过智能技术生成

vue指令 v-show和v-if

目标: 控制标签的隐藏或出现

语法:
- v-show=“vue变量”
- v-if=“vue变量”
原理
- v-show 用的display:none隐藏 (频繁切换使用)
- v-if 直接从DOM树上移除
高级
- v-else使用

<template>
  <div>
      <!-- v-show / v-if = "vue变量" -->
      <!-- v-show 用的 display:none隐藏（频繁切换使用） -->
      <!-- v-if 直接从 DOM 树上移除 -->
      <button @click="isOk=!isOk">布尔值取反{{isOk}}</button>
     <h1 v-show="isOk">这是v-show的盒子</h1>
     <h1 v-if="isOk">这是v-if的盒子</h1>
     <div>
     <!-- v-if 和 v-show 是互斥显示，只显示其中之一  -->
         <p v-if="age>=18">已成年</p>
         <p v-else>未成年</p>
     </div>
  </div>
</template>

<script>
export default {
data () {
    return {
        isOk:true,
        age:18
        
    }
}
}
</script>

<style>

</style>