11.条件渲染

 <!-- 准备一个容器 -->
<div id="root">
    <h1>n的值为{{n}}</h1>
    <button @click="n++">点我n++</button>

    <!-- 使用v-show做条件渲染 -->
    <!-- <h1 v-show="false">hello, {{name}}!</h1> -->
    <!-- <h1 v-show="1===1">hello, {{name}}!</h1> -->

    <!-- 使用v-if做条件渲染 -->
    <h1 v-if="false">hello, {{name}}!</h1>
    <!-- <h1 v-if="1===1">hello, {{name}}!</h1> -->

    <!-- <h2 v-show="n===1">1</h2>
    <h2 v-show="n===2">2</h2>
    <h2 v-show="n===3">3</h2> -->

    <!-- <h2 v-if="n===1">1</h2>
    <h2 v-else-if="n===2">2</h2> -->
    <!-- v-if、v-else-if和v-else不能被打断 -->
    <!-- <h2>@</h2> -->
    <!-- <h2 v-else-if="n===3">3</h2>
    <h2 v-else>hh</h2> -->

    <!-- 这样可能会破坏我们的结构，会麻烦我们去css改样式 -->
    <!-- <div v-show="n===1">
        <h2>你好</h2>
        <h2>世界</h2>
        <h2>北京</h2>
    </div> -->

    <!-- v-if和template的配合使用，可以不破坏结构 -->
    <template v-if="n===1">
        <h2>你好</h2>
        <h2>世界</h2>
        <h2>北京</h2>
    </template>

</div>
<script>

    //创建Vue实例
    new Vue({
        el: '#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data: {//data用于储存数据，数据供el指定的容器使用，值我们先暂时写成一个对象
            name: 'world',
            n: 0,

        }
    })
</script>