<!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>Document</title>
</head>
<body>
<div id="app">
<!-- v-if是控制dom的存在或者不存在的指令
为true 就代表存在 为flase就会把dom删除 -->
<h1 v-if="flag1">我是虎胆小肥羊</h1>
<h1 v-if="flag2">我是小肥羊火锅</h1>
<!-- v-show 是控制css的display的none或者block -->
<!-- 当值为flase的时候不会把dom删除，只会设置成display:none -->
<h1 v-show="flag2">现在人都喜欢吃海底捞不喜欢吃小肥羊了</h1>
<!-- vue的存在就是为了减少了dom操作从而提高性能 -->
<!-- v-if频繁的时候会减少性能 dom会频繁删除和添加 -->
<!-- v-show只是改变了css的样式display:none或block，
所以更推荐,更利于提高性能 -->
<!-- v-if推荐使用在不频繁显示的场景，比如一进入页面就需要判断加载
例如权限菜单 -->
<!-- v-show tab页需要频繁切换，所以这种场景就推荐使用v-show -->
<h1>权限菜单</h1>
<ul>
<li>基本功能</li>
<li v-if="user=='admin'">删除用户</li>
<li v-else>查看个人信息</li>
</ul>
<h1 v-if="flag==true">你真棒</h1>
<h1 v-else>再接再厉继续努力</h1>
<!-- v-if配合v-else使用的时候 中间不可以存在别的元素 -->
<button v-on:click="flag=!flag">点我试试</button>
</div>
<script src="./vue 2.6.14.js"></script>
<script>
// 指令（Directive）是特殊的带有 v- 前缀的特性
let vm = new Vue({
el: "#app",
data: {
user: "admin",
flag: true,
flag1: true,
flag2: false,
},
methods: {
}
});
</script>
</body>
</html>
