美文网首页
VUE条件渲染

VUE条件渲染

作者: 陈老板_ | 来源:发表于2018-06-13 22:05 被阅读6次

    条件渲染指令:
    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>
    

    相关文章

      网友评论

          本文标题:VUE条件渲染

          本文链接:https://www.haomeiwen.com/subject/hfojeftx.html