<!-- v-show是控制css的display的none或者block -->
<!-- 当值为false的时候，不会把dom删除，只会设置成display:none -->
<!-- <h1 v-show="flag1">现在人都喜欢吃海底捞不喜欢吃小肥羊了</h1> -->
<!-- vue的存在就是为了减少了dom操作从而提高性能 -->
<!-- v-if频繁操作会减少性能 因为dom会频繁删除和添加 -->
<!-- v-show只是改变了css的样式display:none 或者block，
所以更推荐，更利于提高性能 -->
<!-- v-if推荐使用在不频繁显示的场景，比如一进入页面就需要判断加载
例如权限菜单 -->
<!-- v-show 例如：tab页需要频繁切换，所以这种场景就推荐使用v-show -->
<!-- 指令里面可以直接写data里面的属性 -->
<!-- 指令里面也可以直接修改data里面的属性 -->
<!-- <h1 @click="flag=!flag">权限菜单</h1> -->
<h1 @click="fn">权限菜单</h1>
<ul>
<li>基本功能</li>
<!-- <li v-if="user=='admin'">删除用户</li> -->
<li v-if="flag">删除用户</li>
<!-- <li>查看列表</li> -->
<li v-else>查看自己的信息</li>
<!-- v-if配合 v-else使用的时候 中间不可以存在别的元素 -->
</ul>
</div>
<script src="./vue2.6.14.js"></script>
<script>
/* 指令（Directive）是特殊的带有 v- 前缀的特性 */
let vm = new Vue({
el: "#app",
data: {
flag:true,
user: "yonghu",
flag1: true,
flag2: false,
},
methods: {
fn(){
/* this.flag = !this.flag; */
if(this.flag){
this.flag = false;
}else{
this.flag = true;
}
}
}
});
/* 一打开页面 判断 data里面的flag是否为true
为true显示你真棒
为false 显示你还需要努力*/
/* 还有一个按钮 点击可以切换flag的状态，为true点一下就变false
为false，点一下就变true */
</script>
