目录
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 lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>欢迎和{{name}}一起学习</h2><hr>
<h2>当前的值是{{n}}</h2>
<button @click="n++">点我让n+1</button><br><br>
<!-- 使用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-if 和 v-else-->
<!-- <div v-if="n === 1">愿日子如熹光</div> -->
<!-- <div v-else-if="n === 2">温柔且安详</div> -->
<!-- <div v-else-if="n === 3">你问赤诚且勇敢</div> -->
<!-- <div v-else-if="n === 4">欣喜也在望</div> -->
<!-- <div v-else>你未必光芒万丈,但应温柔而有光</div> -->
<!-- v-if 和 template的配合使用 -->
<template v-if="n === 1">
<h2>山川是不卷收的文章</h2>
<h2>日月为你掌灯伴读</h2>
</template>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示
const vm = new Vue({
el:"#root",
data:{
name:"才疏学浅的小缘同学",
n:0
}
})
</script>
</html>
早成者未必有成,晚达者未必不达