4vue v-if 和v-show使用共同点第一种第二种不同之处v-if每次重新删除或创建元素有较高的切换性能元素涉及到

共同点

第一种

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="toggle" name="" id="" @click="ifShow">
        <p v-if="flag">这是v-if控制的元素</p>
        <p v-show="flag">这是v-show控制的元素</p>
    </div>
    <!--  -->
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                flag: true
            },
            methods: {
                ifShow() {
                    this.flag = !this.flag
                }
            },
        })
    </script>
</body>

</html>

第二种

  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <script src="./lib/vue.js"></script>
  </head>
  
  <body>
      <div id="app">
          <input type="button" value="toggle" name="" id="" @click="flag=!flag">
          <p v-if="flag">这是v-if控制的元素</p>
          <p v-show="flag">这是v-show控制的元素</p>
      </div>
      <!--  -->
      <script>
          var vm = new Vue({
              el: "#app",
              data: {
                  flag: true
              }
          })
      </script>
  </body>
  
  </html>

不同之处

v-if 每次重新删除或创建元素有较高的切换性能元素涉及到频繁切换，最好不要使用

v-show每次不会重新dom操作只是切换了元素的display：none属性，有较高的初始渲染的消耗，本来根本就看不见，用户可能永远看不见就用它

 <!-- 每次重新删除或创建元素 有较高的切换性能 元素涉及到频繁切换，最好不要使用-->
 <p v-if="flag">这是v-if控制的元素</p>
 <!-- v-show每次不会重新dom操作只是切换了元素的display：none属性，有较高的初始渲染的消耗，本来根本就看不见 -->
 <p v-show="flag">这是v-show控制的元素</p>