Vue-常用系统指令，显示隐藏元素v-if与v-show的使用_vue 根据flag值 选择显示哪一个

v-if 与 v-show

• v-if 判断是否移除或者插入元素（默认显示）

  • 根据表达式的值的布尔值来决定是否渲染元素，如果条件为 false 不渲染（达到隐藏元素的目的），为 true 则渲染。在切换时元素及它的数据绑定被销毁并重建。

• v-show 判断是否显示或隐藏元素（默认隐藏 false）

  • 根据表达式的布尔值，切换元素的 display CSS 属性，如果为false，则在元素上添加 display:none （行内样式）来隐藏元素，否则移除 display:none 实现显示元素。

  HTML:

  <div id="app">
      <input type="button" name="" :value="msg" @click="flag=!flag">
      <h1 v-if="flag">这是 v-if 控制的元素</h1>
      <h1 v-show="flag">这是 v-show 控制的元素</h1>
  </div>
  1
  2
  3
  4
  5

  JS:

  new Vue({
      el: '#app',
      data: {
          flag: true,
          msg: '显示/隐藏'
      },
      methods: {
  
      }
  }) 
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10