Vue技术11.条件渲染

最新推荐文章于 2024-11-01 14:29:13 发布

yitahutu79

最新推荐文章于 2024-11-01 14:29:13 发布

阅读量100

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40713201/article/details/126238329

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中的条件渲染，包括v-if和v-show的用法和区别。v-if适用于切换频率较低的场景，它会直接移除不显示的DOM元素；而v-show则适合切换频繁的情况，元素不会被移除，只是通过样式隐藏。v-if可以与v-else-if和v-else配合使用，但结构不能被打断。示例中展示了v-show在欢迎信息渲染中的应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>>
<html>
    <head>
        <mata charset="UTF-8"/>
        <title>条件渲染</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--
            条件渲染：
                1.v-if
                写法：
                    （1）v-if=“表达式”
                    （2）v-else-if=“表达式”
                    （3）v-ellse=“表达式”
                适用于：切换频率较低的场景
                特点：不展示的dom元素直接被移除
                注意：v-if可以和v-else-if和v-else一起使用，但要求结构不能被“打断”。
                template一定使用v-if
                2.v-show
                写法：
                适用于：切换频率较高的场景
                特点：不展示dom元素未被移除，仅仅是使用样式隐藏掉
                3.备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到。
        -->
        <!-- 准备好一个容器 -->
        <div id="root">
            <h2 v-show="true">欢迎来到{{name}}</h2>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            }
        })
    </script>
</html>