<!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存在，false就把dom删除 -->
<h1 v-if="flag1">我是虎胆小肥羊</h1>
<h1 v-if="flag2">肥羊火锅</h1>
<!-- v-show是控制display的none或者block -->
<!-- 当值为false的时候，不会删除dom，只是会把display设置为none -->
<h1 v-show="flag2">现在人都喜欢吃海底捞，不喜欢吃小肥羊了</h1>
<!-- vue的存在就是为了减少dom操作从而提高了性能 -->
<!-- v-if频繁操作会减少性能，因为dom会频繁删除和增加；
推荐使用在不频繁显示的场景，比如一进入页面就需要判断加载 -->
<!-- v-show只是改变了css的display样式，推荐使用，有利于提高性能；
tab页需要频繁切换，建议使用v-show -->
<h1>权限菜单</h1>
<ul>
<li>基本功能</li>
<li v-if="user=='admin'">删除用户</li>
<li v-else>查看自己信息</li>
</ul>
</div>
<script src="./vue2.6.14.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
user: "guest",
flag1: true,
flag2: false,
}
})
</script>
</body>
</html>
