6.Vue v-if和v-for的优先级

<template>
  <div >
    <p v-if="isShow" v-for="item in items" :key="item">
        {{ item.title }}
 </p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [
        { title: 'foo' },
        { title: 'baz' }]
    }
  },
  computed: {
    isShow () {
      return this.items && this.items.length > 0
    }
  }
}
</script>

上面这种写法会报错，This 'v-if' should be moved to the wrapper element  vue/no-use-v-if-with-v-for

vue已经不允许v-if和v-for在同一元素上使用。

v-for的优先级比v-if的优先级高

<template>
  <div>
    <template v-if="isShow">
      <p v-for="(item,index) in items" :key="index">
        {{ item.title }}
      </p>
    </template>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items: [{ title: 'foo' }, { title: 'baz' }]
    }
  },
  computed: {
    isShow () {
      return this.items && this.items.length > 0
    }
  }
}
</script>

这样的写法就不会报错，会先进行v-if判断，再进行v-for循环

最终结论：v-for的优先级比v-if的优先级高

注意事项

        1.不要把v-if和v-for放在同一个元素上，带来性能的浪费（每次渲染都会先进行循环再进行判断）

        2.在外层套上template，在这一层上进行判断，在内部进行for循环

        3.如果判断出现在循环内部，则我们可以利用计算属性先将不需要的数据进行过滤，Array.filter,提高效率