vue 中v-if 的使用

条件判断
1.v-if
在元素和templa中使用v-if指令
1.1 如果条件为真，则显示当前的标签
但是其他的不满足条件的Dom则不会显示
1.2不满足条件的Dom也不会出现在浏览器的Dom树中；

2.v-if  v-else-if   v-else  不一定要同时使用
但是前面没有v-if 不能使用 v-else-if 和v-else
如何判定前面，所谓的前面就是当前标签的哥哥元素，
如果写了，不影响后续代码的执行

例题1.
<div id= "app">
    <p v-if="seen">现在你看到了</p>
    <template v-if="ok">
        <h1>我也是被看到的</h1>
        <p>我们都在data中被定以为true被看到</p>
    </template>
</div>
<script src="vue.js文件"></script>
<script>
let vm = new Vue({
    //挂载Dom
    el:"#app"，
    //数据
    data：{
        seen：true，
        ok：true

    }
})
</script>
例题2.
随机生成一个数字，判断是否大于0.5，然后输出对应信息：
<div id="app">
    <div v-if="Math.random()>0.5">
        soory //大于0.5显示的是我
    </div>
    <div v-else>
    not sorry  //小于0.5显示的是我
    </div>
</div>
<script>
    let vm = new Vue({
    el："#app"
})
</script>

2.v-else-if  可以链式的多次使用
例题2.判断type变量的值
<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      not A/B/C
    </div>
</div>
<script>
    let vm = new Vue({
    el："#app"，
    data：{
        type：'C'
    }
})
</script>

3. v-show指令
            v-show  显示
            v-show = true  显示
            v-show = false 不显示
            v-show的核心是控制元素样式的display属性
<div id="app">
    <h1 v-show="ok">我是v-show</h1>
</div>
	
<script>
letvm = new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>

例题2.
 <div id="app">
        <!-- point的数字大于80分才显示 -->
        <div v-show="point >= 80">

        <!-- 虽然不满足条件v-show=true的条件，但是里面的数据仍然会渲染 -->
            {{point >= 80 ? "优秀" : "良好"}}

        </div>

        <div v-show="point < 80" @click="change()">
            {{point >= 80 ? "优秀" : "良好"}}
        </div>
  </div>
  <script src="../vueJs文件/vue.js"></script>
  <script>
      let vm = new Vue({
          el:'#app',
          data: {
              point: 60
          },
          methods:{
              change(){
                  this.point = 80
              }
          }
      })
   </script>