是特殊属性vs v-if / v-show

is special attribute is:

<!-- Component changes when currentTabComponent changes -->
<component v-bind:is="currentTabComponent"></component>

conditional rendering is:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

I know the different between using v-if and v-show, but I don't know the difference between using a list of v-ifs for different cases vs using the is special attribute. When should I use them?

评论
大笨瓜o
大笨瓜o

is would be useful if the list of v-ifs would all render a component if true.

像这样:

<template v-if="component == "firstComponent">
    <first-component></first-component>
<template v-else-if="component == "secondComponent">
    <second-component></second-component>
</template>
<template v-else-if="component == "thirdComponent">
    <third-component></third-component>
</template>

然后可以将其简化为:

<component :is="component"></component>
点赞
评论