09 笔记

梦梦的小斑鸠

已于 2022-09-21 19:50:43 修改

阅读量122

点赞数

文章标签： javascript 前端 vue.js

于 2022-09-21 19:45:45 首次发布

本文链接：https://blog.csdn.net/CP011522/article/details/126979155

版权

v-if和v-show

<body>
          <!-- v-show和v-if都可以用来控制标签的显示与隐藏 -->
          <!-- true就显示，false就隐藏 -->
        <div id="app">           
            <div v-show ="display">show控制</div>
            <div v-if ="display">if控制</div>
        </div>
      <script src="./vue.min.js"></script>
      <script>       
        new Vue({
            el:"#app",
            data:{
                display:true
                
            }
        })
      </script>
      <!-- 【v-show】
      1.本质就是标签display设置为none,控制隐藏。只是基于CSS进行切换。
      2.V-show有更高的初始渲染消耗。
      3.V-show适合频繁切换的情况。
      【v-if】
      1.动态的向DOM树内添加或者删除DOM元素。
      2.v-1f有更高的切换消耗。
      3.v-1f适合运行条件很少改变的情况。 -->
    
</body>

true

false

<body>
    <div id="app"> 
    <h3></h3>
    <div v-if="money >=10000">去海边双人游</div>
    <div v-else-if="money>=5000">买点自己想要的都行</div>
    <div v-else-if="money >=1000">省着</div>
     <div v-else-if="moeny>=100">吃土</div> 
     <div v-else>应该不至于</div>
     -------------------------------------------
     <!-- 双分支 -->
     <div v-if="age >= 18">干不能干的事</div>
     <div v-else>啥都不能干</div>
     </div>
      <script src="./vue.js"></script>
       <script>        
        new Vue({
              el:'#app', 
        data:{
             money:3000 ,
             age:20
          }
        })
        
       </script>
    
</body>