vue - 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>