vue - v-if和v-for不能用在同一个元素上

原因：v-for优先级比v-if高如果把v-if和v-for同时用在同一个元素上，每次渲染都会先循环再进行条件判断，会带来性能方面的浪费，所以永远不要把v-for和v-if同时用在同一个元素上用法：1、将v-if放到循环列表元素...

原因：

v-for优先级比v-if高

如果把v-if和v-for同时用在同一个元素上，每次渲染都会先循环再进行条件判断，会带来性能方面的浪费，所以永远不要把v-for和v-if同时用在同一个元素上

用法：

1、将v-if放到循环列表元素的父元素中

2、在外层嵌套template层（页面渲染不生成dom节点）进行v-if判断，然后在内部进行v-for循环

例子：

错误写法：

 <div id='app'>
    <!-- 
      每循环一次，就进行一次v-if判断
      比如，v-for循环6次取出books数组中所有的元素，v-if也进行6次判断
      造成很大的性能浪费，所以不建议使用
     -->
    <p v-if="this.books !=''" v-for="(item,index) in books">{{item}}--{{index}}</p>
  </div>

 <script>
    const app = new Vue({
      el: '#app',
      data: {
        books: ["v-for优先级高于v-if","v-for和v-if不能在同一个元素中使用",
                "如果一起使用，每次都会先循环再进行判断","造成性能上的浪费",
                "可以在嵌套template中进行v-if判断","在内部进行v-for循环"]
      }
    })
  </script>

正确写法：

    <!-- 
      正确用法：
      1、将v-if放到循环列表元素的父元素中
     -->
    <ul v-if="this.books !=''">
      <li v-for="(item,index) in books">{{item}}--{{index}}</li>
    </ul>

    <!-- 
      正确用法：
      2、使用template将v-for渲染的元素包起来，在template上使用v-if
     -->
    <template v-if="this.books !=''">
      <div v-for="(item,index) in books">{{item}}--{{index}}</div>
    </template>