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

巴特西

Vue----v-if 条件渲染

最新文章

热门文章