13-Vue核心-条件渲染

使用 v-if 做条件渲染

写法：

1）v-if = "表达式"

2）v-else-if = "表达式"

3）v-else = "表达式" 或简写为 v-else

适用于：切换频率较低的场景

特点：不展示的DOM元素直接被移除

注意：v-if 可以和 v-else-if 、v-else 一起使用，但要求结构不能被"打断"

使用 v-show 做条件渲染

写法：

v-show = "表达式"

适用于：切换频率较高的场景

特点：不展示的DOM元素不会被移除，仅仅只是样式被隐藏掉，相当于标签display设置为none

v-if 和 v-show 的本质区别

1）v-if 是动态的向DOM树内添加或者删除DOM元素，而 v-show 相当于是把标签display设置为none，显示隐藏

2）使用 v-if 时，元素可能无法获取到，而使用 v-show 一定可以获取到

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>条件渲染</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--  准备好一个容器  -->
        <div id="root">
            <!--  使用 v-show 做条件渲染  -->
            <!--  当v-show="false"时，相当于标签display设置为none，显示隐藏  -->
            <h2 v-show="is_show === '显示'">欢迎来到{{name}}的博客园</h2>

            <!--  使用 v-if 做条件渲染  -->
            <!--  当v-if="false"时，则是动态的向DOM树内添加或者删除DOM元素  -->
            <h2 v-if="is_show === '显示'">欢迎来到{{name}}的博客园1</h2>
            <h2 v-else-if="is_show === '隐藏'">欢迎来到{{name}}的博客园2</h2>
            <h2 v-else>欢迎来到{{name}}的博客园3</h2>

            <button @click="changeShow">切换显示</button>
        </div>

        <script type="text/javascript">
            // 阻止 vue 在启动时生成生产提示
            Vue.config.productionTip = false

            const vm = new Vue({
                el:"#root",
                data(){
                    return{
                        name:"马铃薯",
                        is_show:"显示"
                    }
                },
                methods:{
                    changeShow(){
                        this.is_show === "显示" ? this.is_show="隐藏" : this.is_show="显示"
                        console.log(this.is_show)
                    }
                }
            })
        </script>
    </body>
</html>

我们需要考虑一个问题，当我们需要用到 v-if 进行条件渲染时，如果是通过以下方式的话，则会在我们想展示的内容外面加上一层<div>，会影响DOM树结构

<div v-if="is_show === '显示'">
    <h2>欢迎来到{{name}}的博客园1</h2>
    <h2>欢迎来到{{name}}的博客园2</h2>
    <h2>欢迎来到{{name}}的博客园3</h2>
</div>

这里可以使用<template>标签，解决这个问题

<template>标签的使用

<template>标签在页面加载时该标签中的内容不会显示，加载后可以使用 JavaScript 来显示它

<template>标签不会影响DOM树结构，但只能配合 v-if ，不能配合 v-show

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>条件渲染</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--  准备好一个容器  -->
        <div id="root">
            <!--  使用 v-if 做条件渲染  -->
            <!--  当v-if="false"时，则是动态的向DOM树内添加或者删除DOM元素  -->

            <!--  如果通过div标签，做 v-if 条件渲染时，会在我们想展示的内容外面加上一层<div>，会影响DOM树结构  -->
            <div v-if="is_show === '显示'">
                <h2>欢迎来到{{name}}的博客园1</h2>
                <h2>欢迎来到{{name}}的博客园2</h2>
                <h2>欢迎来到{{name}}的博客园3</h2>
            </div>

            <hr/>

            <!--  <template>标签 在页面加载时该标签中的内容不会显示，加载后可以使用 JavaScript 来显示它  -->
            <!--  <template>标签 不会影响DOM树结构，但只能配合 v-if ，不能配合 v-show-->
            <template v-if="is_show === '显示'">
                <h2>欢迎来到{{name}}的博客园1</h2>
                <h2>欢迎来到{{name}}的博客园2</h2>
                <h2>欢迎来到{{name}}的博客园3</h2>
            </template>

            <button @click="changeShow">切换显示</button>
        </div>

        <script type="text/javascript">
            // 阻止 vue 在启动时生成生产提示
            Vue.config.productionTip = false

            const vm = new Vue({
                el:"#root",
                data(){
                    return{
                        name:"马铃薯",
                        is_show:"显示"
                    }
                },
                methods:{
                    changeShow(){
                        this.is_show === "显示" ? this.is_show="隐藏" : this.is_show="显示"
                        console.log(this.is_show)
                    }
                }
            })

        </script>
    </body>
</html>

posted @ 2023-09-19 16:27 马铃薯1 阅读(34) 评论(0) 收藏举报

刷新页面返回顶部

马铃薯1

13-Vue核心-条件渲染

公告