【读书笔记】第3章 指令—v-if, v-else, v-sho

1、v-if ：生成或移除指令。 true， 生成；false， 移除。

<div id = "example">
    <p v-if = "greeting">Hello</p>
    <p v-if = "saying">say Hello</p>
    <template v-if = "ok">
        <h1>Title</h1>
        <p>Paragraph 1 </p>
        <p>Paragraph 2 </p>
    </template>
</div>
<script>
    var exampleVM2 = new Vue({
        el : "#example",
        data : {
            greeting : false ,
            saying : true, 
            ok : true
        }
    })
</script>

2、v-else : 和v-if搭配在一起使用，冲当else的功能。
3、v-show: 显示或隐藏HTML元素。即， 为true时， style="display： block;"；为false时， style="display： none;"；

<div id = "example">
    <!-- 他两是一对， 可以用在一起 -->
    <p v-if = "ok">true</p>
    <p v-else = "ok">false</p>

    <!-- v-show 的 反向是通过 条件的否定来实现， v-show 和 v-else 不可以用在一起， 会出错 -->
    <p v-show = "condition">v-show 的 true</p>
    <p v-show = "!condition">v-show 的 false</p>
</div>
<script>
    var exampleVM2 = new Vue({
        el : "#example",
        data : {
            ok : false,
            condition : false
        }
    })
</script>