vue3.x 条件渲染

 

注：实例环境 vue cli构建的项目

app.vue

<template>
  <Example></Example>
</template>

<script>
import Example from './components/Example'

export default {
  name: 'App',
  components: {
    Example
  }
}
</script>

<style>

</style>

Example.vue

<template>
    <div style="text-align: center;">
        <button @click="status=!status">显示/消失(v-if)</button>
        <h3 v-if="status">显示/消失演示</h3>
        <hr>
        <button @click="status2=!status2">切换演示(v-if/v-else)</button>
        <h3 v-if="status2">切换显示1</h3>
        <h3 v-else>切换显示2</h3>
        <hr>
        <button @click="status3=!status3">显示/消失(v-show)</button>
        <h3 v-show="status3">v-show演示</h3>
    </div>
</template>

<script>
    export default {
        name: "Example",
        data:function () {
            return {
                status: true,
                status2: true,
                status3: true
            }
        }
    }
</script>

<style scoped>
</style>

浏览器显示结果