条件渲染(v-if和v-show)

<div id="root">
        <!-- 会将元素转换weidisplay:none进行隐藏，适用于切换频率较高的场景 -->
        <h1 v-show="false">Hello,{{name}}</h1>
        <!-- 会将元素直接全部干掉,适用于切换频率较低的场景 -->
        <h1 v-if="false">Hello,{{name}}</h1>
        <h4>n的值为{{n}}</h4>
        <button @click="n++">点击我n+1</button>

        <!-- v-else-if和v-else的用法 -->
        <!-- v-if可以和v-else,v-else-if使用，中间不允许打断 -->
        <div v-if="n==1">Angular</div>
        <div v-else-if="n==2">React</div>
        <div v-else-if="n==3">Vue</div>
        <div v-else>哈哈</div>

        <!-- template的好处是不会破坏页面的结构，而且只能配合v-if使用 -->
        <template v-if="n==1">
            <h2>你好</h2>
            <h2>我的</h2>
            <h2>某某</h2>
        </template>
    </div>

    <script type="text/javascript">
        //创建Vue实例
        const x = new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务，值通常为css选择器字符串
            // el: document.getElementById('root')
            data: {
                name: '西南大学',
                n: 0
            }
            //data用于存放数据，数据供el所指定容器服务
        })
    </script>