zoukankan      html  css  js  c++  java
  • Vue----v-if 条件渲染

    先看一个使用vue v-if的小例子

    <div id="example">
        <p>小明和小李和小新,小月正在捉迷藏此时</p>
        <p>小明我看到你了!机智的你快帮助小明隐藏起来吧</p>
        <p v-if="sreen">此时正在吃瓜的小明</p>
    </div>
    
    new Vue({
       el:"#example",
       data:{
          sreen:false // 当sreen:true小明才会被发现 否则小明是隐藏的
        }
    })
    

    我们刚把小明藏起来,小李又开始找其他人了,我们快帮帮其他人藏起来吧!但怎么把3个人同时隐藏起来呢!我们可以使用template元素实现:

    <div id="example">
        <p>小明和小李和小新,小月正在捉迷藏此时</p>
        <p>小明我看到你了!机智的你快帮助小明隐藏起来吧</p>
        <p v-if="sreen">此时正在吃瓜的小明</p>
        <template v-if="hidden">
             <p>躲在角落里的小新</p>
             <p>躲在树后面的小月</p>
        </template>
    </div>
    
    new Vue({
       el:"#example",
       data:{
          sreen:false ,// 当sreen:true小明才会被发现 否则小明是隐藏的
          hidden:false
        }
    })
    

     耶有种助人为乐的感觉想想还有点兴奋呢!

       游戏还在进行着!我们决定捉弄小李一翻,当小李从小新身边经过后把他显示出来,同理,小月也这样做

    通过V-else实现

      

    <div id="example">
        <p v-if="sreen">当从小新旁边经过后显示,要是在小月旁边经过就显示小月</p>
       <p v-else>小月:如果不是从小新的身边经过的话我就显示</p>
    </div>
    
    new Vue({
       el:"#example",
       data:{
          sreen:false ,//为小明隐藏时时 小月显示
        }
    })

    吃瓜群众道:“我小明还没显示呢”!

    V-if-else实现

    此时规则变成了小李在谁附近谁就隐藏

    <div id="example">
    <p v-if="sreen==='xiaoming'">小月小新显示,小明隐藏</p>
    <p v-else-if="sreen==='xiaoyue'">小新小明显示,小月隐藏</p>
    <p v-else-if="sreen==='xiaoxin'">小月小明显示,小新隐藏</p>
    </div>

    new Vue({
    el:"#example",
    data:{
    sreen:'xiaoyue'
    }
    })

    好吧v-if条件渲染就到这吧!话说小李抱歉了哈 2333

  • 相关阅读:
    ASP.NET CORE 2.0 模板 (Admin LTE)
    MVC5+EF6 完整教程17--升级到EFCore2.0
    MVC 5 + EF6 完整教程16 -- 控制器详解
    MVC 5 + EF6 完整教程15 -- 使用DI进行解耦
    MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航
    MVC5+EF6 入门完整教程13 -- 动态生成多级菜单
    MVC5+EF6 入门完整教程12--灵活控制Action权限
    MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用
    LeetCode 504. Base 7
    LeetCode 594. Longest Harmonious Subsequence
  • 原文地址:https://www.cnblogs.com/qjuly/p/8505512.html
Copyright © 2011-2022 走看看