<body>
    <div id="app">
      <input type="button" @click="toggle" value="toggle" />

      <!-- 每次都会重新删除或创建元素 -->
      <h3 v-if="flag">这是v-if控制的元素</h3>
      <!-- 每次不会重新进行DOM的删除和创建操作，只是切换了元素的display: none 样式 -->
      <h3 v-show="flag">这是v-show控制的元素</h3>

      <!-- v-if 有较高的切换性能消耗 -->
      <!-- v-show 有较高的初始渲染消耗 -->
      <!-- 如果元素涉及到频繁的切换，最好不要使用 v-if，则推荐使用 v-show -->
      <!-- 如果元素可能永远也不会显示出来被用户看到，则推荐使用 v-if -->
    </div>

    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          flag: true,
        },
        methods: {
          toggle() {
            this.flag = !this.flag
          },
        },
      })
    </script>
  </body>
  1. v-if 与 v-show的区别：v-if每次都会重新删除或创建元素，v-show不会重新进行DOM的删除和创建操作，只是切换了元素的display: none 样式
  2. 性能方面：v-if 有较高的切换性能消耗，v-show 有较高的初始渲染消耗
  3. 总结：如果元素涉及到频繁的切换，最好不要使用 v-if，推荐使用 v-show，如果元素可能永远也不会显示出来被用户看到，则推荐使用 v-if
# 前端 # html # vue.js # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue