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>

  <ul class="list">

    <li v-for="(item, index) in list" :key="index" class="item">

      <template v-if="item.type === 1">

        <h2>Type1</h2>

      </template>

      <template v-if="item.type === 2">

        <h2>Type2</h2>

      </template>

      <template v-if="item.type === 3">

        <h2>Type3</h2>

      </template>

    </li>

  </ul>

</template>

复杂结构，使用 动态组件

<template>

  <ul class="list">

    <li v-for="(item, index) in list" :key="item" class="item">

          <componnet :is="componnetMap[item.type]"></componnet>

      </li>

  </ul>

</template>

当然，也可以使用 functional Component