<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>条件渲染</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!--
条件渲染
1.v-if
写法
1) v-if="表达式"
2) v-else-if="表达式"
3) v-else=“表达式”
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除，在页面源码中无法看到
注意：v-if，v-else-if 、 else if，div要紧紧的挨在一起，不能打断 -
2.v-show
写法：v-show=“表达式”
适用于：切换频率较高的场景
特点：不展示DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到
-->
<h1>当前n的值是{{n}}</h1>
<button @click="n++">点我自增加1</button>
<!-- v-else-if 类似java中if else if判断 -->
<!-- 这四个div要紧紧的挨在一起，不能打断 -->
<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>你好呀</div>
<!--
当我们对某几个标签添加相同的样式的时候，我们就可以使用template标签，在标签上添加v-if属性
好处：不影响整体样式。
备注：template标签不影响整体结构，只是把下面这三个标签给包裹起来，在页面查看源码的时候也不会发现template标签
-->
<!-- template标签不影响整体结构，只是把下面这三个标签给包裹起来，在页面查看源码的时候也不会发现template标签
此标签只能使用v-if，不能使用v-show -->
<template v-if="n===1">
<h2>你好</h2>
<h2>中国</h2>
<h2>北京</h2>
</template>
<!--使用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">v-if 渲染欢迎来到{{name}}</h2>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
name: "尚硅谷",
n: 0,
},
});
</script>
</html>