Vue3条件语句-v-if/v-else/ v-else-if/v-show

文章目录

Vue3条件语句-v-if/v-else/ v-else-if/v-show
- 1. v-if
- 2. v-else
- 3. v-else-if
- 4. v-show

Vue3条件语句-v-if/v-else/ v-else-if/v-show

1. v-if

v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js">script>
head>
<body>

<div id="app" class="demo">
    
    <p v-if="seen">现在你看到我了p>
div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
            return {
                // seen为false信息就无法显示
                seen: true
                // seen: false
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 中
    Vue.createApp(HelloVueApp).mount("#app")
script>
body>
html>