VUE条件渲染

条件渲染指令:
v-if v-else v-show
如果频繁切换 v-show比较好
v-if v-else会干掉元素 v-show则是通过style隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="demo">
        <p v-if="ok">成功了</p>
        <p v-else>失败</p>

        <p v-show="ok">表白成功</p>
        <p v-show="!ok">表白失败</p>

        <button @click="ok=!ok">切换</button>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:'#demo',
        data:{
            ok: false
        }
    })
</script>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 条件渲染 v-if 在<template>元素上使用v-if条件渲染分组 最终的渲染结果将不包含<template...
    oWSQo阅读 797评论 1 0
  • v-if 在字符串模板中,比如 Handlebars,我们得像这样写一个条件块: 在 Vue 中,我们使用 v-i...
    Program_黑阅读 687评论 0 7
  • Vue条件渲染 v-if v-if可使用v-else指令来表示它的else块,v-else元素必须紧跟带v-if或...
    JunChow520阅读 195评论 0 0
  • 指令 v-if是一个指令,必须将他添加到一个元素上 v-else v-else-if 用key管理可复用的元素 v...
    上山走18398阅读 244评论 0 0
  • 四月槐花开正遍。 素雅多情, 漫把春心唤。 屋后房前芳菲满, 山外山里躬耕遍。 盛世繁华在世间。 缱绻情怀, 系个...
    春姐_1ff3阅读 168评论 0 0