v-for和v-if同时使用

v-for和v-if不可同时使用；

可以在v-for的外层嵌套一层template 在使用v-if

<template v-if='isList'>
    <ul>
<li v-for='item in list' :key='item.id'>{{item.title}}</li>
</ul>
</template>

如果渲染的数据不是太大可以使用computed来代替；

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "CartIndex",

  data() {
    return {
      isEn: true,
      alist: [
        {
          id: 1,
          title: "hellowo",
        },
        {
          id: 2,
          title: "heenkcjkjvg",
        },
      ],
      blist: [
        {
          id: 1,
          title: "你好",
        },
        {
          id: 2,
          title: "中文",
        },
      ],
    };
  },
  computed: {
    list() {
      if (this.isEn) {
        return this.alist;
      } else {
        return this.blist;
      }
    },
  },


};
</script>