在template的root标签中不能使用v-for

• 因为根元素只能有一个，所以v-for放在根元素上Vue会不知道怎么渲染
  这样写会报错:

<template v-for="product in productList">
  <div class="main_left" >
    <div class="product_list">
      <h3>全部产品</h3>
      <ul class="list">
        <li>{{ product.title }}</li>
        <li v-for="item in product.list">
          <a :href="item.url">{{ item.name }}</a>
          <span v-if="item.hot" class="hot_if"></span>
        </li>
      </ul>
      <div v-if="!product.last" class="hr"></div>
      <ul class="list">
        <li>手机应用类</li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
       productList: {
        ...
       }
      }
    }
  }
</script>

一般正确写法：

<template>
  <div class="index-wrap">
    <div class="index-left">
      <div class="index-left-block">
        <h2>全部产品</h2>
        <template v-for="product in productList">
          <h3>{{ product.title }}</h3>
          <ul>
            <li v-for="item in product.list">
              <a :href="item.url">{{ item.name }}</a>
              <span v-if="item.hot" class="hot-tag">HOT</span>
            </li>
          </ul>
          <div v-if="!product.last" class="hr"></div>
        </template>
      </div>
    </div>
  </div>
</template>