Vue.js 条件语句

Vue.js 条件语句

v-if

html 代码

        <div id="app">
            <p v-if="seen">是true你就能看到我</p>    
        </div>
        <script type="text/javascript">
            new Vue({
                el:'#app',
                data:{
                    seen:true
                }
            })
        </script>

v-if指令会根据表达式seen和show的值（true或false）来决定是否插入标签内容。

v-else

还可以通过v-else指令为其添加一个 else 块：
html 代码

<div id="app">
    <p v-if="seen">是true你就能看到我</p>    
    <p v-else>seen是false时显示else块的内容</p> 
</div>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            seen:false
        }
    })
</script>

v-if-else

html 代码

<div id="app">
    <p v-if="num < 10">比10小</p>
    <p v-else-if="num < 20">比20小</p>
    <p v-else-if="num < 30">比30小</p>
    <p v-else>都不是</p>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            num:100
        }
    })
</script>

v-show

html 代码

<div id="app">
    <p v-show="show">show和if不一样，if是决定是否插入某个元素，show的元素一直都在只是控制显示与否。</p>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            show:true
        }
    })
</script>

show和if的区别：if是决定是否插入某个元素，show的元素一直都在只是控制显示与否。