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