vue当中的指令和它的用法（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>