美文网首页
Vue.js从0到1:v-if v-else v-show指令

Vue.js从0到1:v-if v-else v-show指令

作者: 鱼da王 | 来源:发表于2018-08-16 00:05 被阅读0次
  1. 代码演示

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>v-if v-show</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="../asserts/js/vue.js"></script>
    </head>
    <body>
        <h1>v-if v-show</h1>
        <hr>
        <div id="app">
            <div v-show="isShow">v-show</div>
            <div v-if='isLogin' v-show='isLogin'> Hello GOld</div>
            <div v-else>请登录</div>
            
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el:'#app',
                data:{
                    isLogin:true,
                    isShow:false
                }
            })
        </script>
    </body>
    </html>
    
  2. v-if & v-show的区别:

    • v-if :判断是否加载
    • v-show:调整css display属性

学习链接: 技术胖

相关文章

网友评论

      本文标题:Vue.js从0到1:v-if v-else v-show指令

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