<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制p元素显示和隐藏</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <button @click="show=!show">
            上西天
        </button>
        <p v-if="!show">野火烧不尽</p>
        <p v-if="!show">芳草碧连天</p>
    </div>
    <script>
        //创建一个应用程序实例
        const vm = Vue.createApp({
            //该函数返回数据对象;
            data() {
                return {
                    show: true
                }
            }
        }).mount('#app');
        //在指定的元素上装载应用程序的根组件;
    </script>
</body>

</html>

没有动画的情况下，整个内容的显示和隐藏会非常的生硬：
如果我们希望给单元素或者组件实现过渡动画，可以使用 transition 内置组件来完成动画；
Vue的transition动画
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡：
条件渲染 (使用 v-if)、条件展示 (使用 v-show)
动态组件
组件根节点
。