Vue 中如何实现类似React一样的循环中设置条件?

Question

Vue中如何实现类似效果? render函数吗?

function App() {

    return [1, 2, 3].map(index => {

        if (index === 1) return <p className="a">one</p>;

        if (index === 3) return <p className="b">two</p>;

        return <p>three</p>;

    });

}

Answer 1

简单结构，使用 template 标签<template>&nbsp; <ul class="list">&nbsp; &nbsp; <li v-for="(item, index) in list" :key="index" class="item">&nbsp; &nbsp; &nbsp; <template v-if="item.type === 1">&nbsp; &nbsp; &nbsp; &nbsp; <h2>Type1</h2>&nbsp; &nbsp; &nbsp; </template>&nbsp; &nbsp; &nbsp; <template v-if="item.type === 2">&nbsp; &nbsp; &nbsp; &nbsp; <h2>Type2</h2>&nbsp; &nbsp; &nbsp; </template>&nbsp; &nbsp; &nbsp; <template v-if="item.type === 3">&nbsp; &nbsp; &nbsp; &nbsp; <h2>Type3</h2>&nbsp; &nbsp; &nbsp; </template>&nbsp; &nbsp; </li>&nbsp; </ul></template>复杂结构，使用 动态组件<template>&nbsp; <ul class="list">&nbsp; &nbsp; <li v-for="(item, index) in list" :key="item" class="item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <componnet :is="componnetMap[item.type]"></componnet>&nbsp; &nbsp; &nbsp; </li>&nbsp; </ul></template>当然，也可以使用&nbsp;functional Component