Vue-条件渲染

最新推荐文章于 2024-10-17 10:08:04 发布

殊序

最新推荐文章于 2024-10-17 10:08:04 发布

阅读量373

点赞数 11

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

本文链接：https://blog.csdn.net/m0_63563047/article/details/142063787

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

条件渲染：

1.v-if

写法：

 v-if="表达式" 

 v-else-if="表达式"

 v-else="表达式"

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

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

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。（被打断后面的结构将不会解析）

2.v-show
写法：

v-show="表达式"

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

<!DOCTYPE html>

<html>

	<head>
		<meta charset="UTF-8" />
		<title>条件渲染</title>
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>

	<body>

    	<div id="app">
    		<h2>当前的n值是:{{n}}</h2>
    		<button @click="n++">点我n+1</button>
    		<!-- 使用v-show做条件渲染 -->
    		<!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
    		<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->
    
    		<!-- 使用v-if做条件渲染 -->
    		<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
    		<!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->
    
    		<!-- v-else和v-else-if -->
    		<!-- <div v-if="n === 1">Angular</div>
    		<div v-else-if="n === 2">React</div>
    		<div v-else-if="n === 3">Vue</div>
    		<div v-else>hello!</div> -->
    
    		<!-- v-if与template的配合使用 -->
    		<template v-if="n === 1">
    			<h2>你好</h2>
    			<h2>老君山</h2>
    			<h2>洛阳</h2>
    		</template>     //template不会出现在页面结构上
    
    	</div>
    </body>
    
    <script type="text/javascript">
    	Vue.config.productionTip = false
    
    	const vm = new Vue({
    		el:'#app',
    		data:{
    			name:'游乐园',
    			n:0
    		}
    	})
    </script>

</html>