Vue条件渲染

  条件渲染：
            1. v-if
                写法：
                    v-if="表达式"
                    v-else-if="表达式"
                    v-else="表达式"
                适用于：切换频率较低的场景
                特点：不展示的DOM元素直接移除
                注意：
                    1.v-if可以和v-else-if.v-else一起使用，但要求结构不能被“打断”
                    2.v-if可以配合template标签一起使用,不会破坏原有的DOM结构
 
 
            2. v-show
                写法：v-show = "表达式"
                适用于：切换频率较高的场景。
                特点：不展示的DOM元素未移除，仅仅是使用样式被隐藏掉了
            3. 备注： 使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到

 <body>
    <div id="root">
        <!-- 隐藏 -->
        <!-- <h1 v-show="false">你好，{{name}}</h1> -->
        <!-- 展示 -->
        <h1 v-show="1===1">你好{{name}}</h1>
        <template v-if="n===4">
            <div>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </div>
        </template>
        <button @click="n++">点击n+1</button>
        <!-- v-if -->
        <div v-if="n===1">1</div>
        <div v-else-if="n===2">2</div>
        <div v-else-if="n===3">3</div>
 
    </div>
    <script>
        Vue.config.productionTip = false;
        new Vue({
            el:"#root",
            data:{
                name:"妞妞",
                n:0
            }
        })
    </script>
</body>

posted @ 2022-07-16 21:52 小罗要有出息阅读(28) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue列表渲染

· Vue的其他指令

· Vue 条件渲染

· [Vue]条件渲染

· Vue学习笔记18--条件渲染

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~

公告

昵称：小罗要有出息
园龄： 3年2个月
粉丝： 1
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

小罗要有出息

Vue条件渲染

公告

搜索

常用链接

随笔分类

随笔档案

文章分类

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	条件渲染：
	1. v-if
	写法：
	v-if="表达式"
	v-else-if="表达式"
	v-else="表达式"
	适用于：切换频率较低的场景
	特点：不展示的DOM元素直接移除
	注意：
	1.v-if可以和v-else-if.v-else一起使用，但要求结构不能被“打断”
	2.v-if可以配合template标签一起使用,不会破坏原有的DOM结构


	2. v-show
	写法：v-show = "表达式"
	适用于：切换频率较高的场景。
	特点：不展示的DOM元素未移除，仅仅是使用样式被隐藏掉了
	3. 备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到

	<body>
	<div id="root">
	<!-- 隐藏 -->
	<!-- <h1 v-show="false">你好，{{name}}</h1> -->
	<!-- 展示 -->
	<h1 v-show="1===1">你好{{name}}</h1>
	<template v-if="n===4">
	<div>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	</div>
	</template>
	<button @click="n++">点击n+1</button>
	<!-- v-if -->
	<div v-if="n===1">1</div>
	<div v-else-if="n===2">2</div>
	<div v-else-if="n===3">3</div>

	</div>
	<script>
	Vue.config.productionTip = false;
	new Vue({
	el:"#root",
	data:{
	name:"妞妞",
	n:0
	}
	})
	</script>
	</body>