<div id="app">
<!-- v-if是控制dom存在或者不存在的指令
为true 就代表存在 为false就会把dom删除 -->
<!-- <h1 v-if="flag1">我是虎胆小肥羊</h1>
<h1 v-if="flag2">我是小肥羊火锅</h1> -->
<!-- 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>
引入Vue
<script src="./vue2.6.14.js"></script>
JS部分
<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>
