vue: v-show 和 v-if 指令控制盒子的显示隐藏-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue: v-show 和 v-if 指令控制盒子的显示隐藏。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

v-show 和 v-if 简介：

1. v-show

    语法: v-show="布尔值"    (true显示, false隐藏)

    原理: 实质是在控制元素的 css 样式, `display: none;`

2. v-if

    语法: v-if="布尔值"   (true显示, false隐藏)

    原理: 实质是在动态的创建或者删除元素节点

应用场景:

         1. 如果是频繁的切换显示隐藏, 用 v-show

             (v-show, 只是控制css样式，而v-if, 频繁切换会大量的创建和删除元素, 消耗性能)

         2. 如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if

             (v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销)

<template>
  <div>
    <!-- 控制元素的 css 样式,  display: none -->
    <h1 v-show="showContent">hello world</h1>
    <!-- 动态删除元素节点 -->
    <h1 v-if="showContent">hello world</h1>
  </div>
</template>
<script>
export default {
  // data中声明的变量
  data() {
    return {
      showContent: false,
    }
  }
}
</script>
<style>

</style>

若多个条件，采用v-if和v-else-if和v-else来控制要显示隐藏的内容

<template>
  <div>
    <!-- 多个条件，采用v-if和v-else-if和v-else -->
    <!-- 多个条件之间，不能插入别的标签 -->
    <h1>去社区送礼品</h1>
    <p>不同年龄段，送不同的礼品</p>
    <p v-if="age < 18">小朋友：棒棒糖</p>
    <p v-else-if="age < 50">青年：快乐水</p>
    <p v-else-if="age < 60">中年：假发</p>
    <p v-else>老年：脑白金</p>
    <p>年龄：{{ age }}</p>
    <button @click="age += 10">长大10岁</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      age: 8,
    };
  }
}
</script>
<style>

</style>

小案例：

需求：点击按钮button变量count值自增，当count大于3，显示内容“恭喜你晋级了”

<template>
  <div>
    <p v-show="showWorld">hello world</p>
    <p v-if="showWorld">hello world</p>
    <button @click="showWorld = !showWorld">显示/隐藏世界</button>

    <h1>{{ count }}</h1>
    <!-- 当count大于3，显示恭喜你晋级了 -->
    <p v-show="count > 3">恭喜你，晋级了！</p>
    <button @click="count++">升级</button>

    <!-- 根据年龄，显示不同文案 -->
    <!-- 小于18 -->
    <h1 v-if="age < 18">少年</h1>
    <!-- 18 - 30 -->
    <h1 v-else-if="age < 30">青年</h1>
    <!-- 30 - 60 -->
    <h1 v-else-if="age < 60">中年</h1>
    <!-- 大于 60 -->
    <h1 v-else>老年</h1>
    <h1>年龄：{{ age }}</h1>
    <button @click="age += 10">长大10岁</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showWorld: true,
      count: 0,
      age: 8,
    }
  }
}
</script>
<style>

</style>

vue: v-show 和 v-if 指令控制盒子的显示隐藏文章来源地址https://www.toymoban.com/news/detail-494461.html