Javascript 何时使用转换与转换组

我正在尝试将转换添加到表单中，这样当用户选择某个问题的特定答案时，它将动态显示下一个问题。目前我看到的是这样的：

<input type="text" :value="vueModel.question1" />
<div v-if="vueModel.question1 === 'hello'">
    //Do something
</div>
<div v-else-if="vueModel.question1 === 'hihi'">
    //Do something
</div>
<div v-else>
    //Do something
</div>

//做点什么
//做点什么
//做点什么

我的问题是，我应该这样添加过渡吗？（为什么？）

//做点什么
//做点什么
//做点什么

还是这样？（为什么？）

//做点什么
//做点什么
//做点什么

---

或者，是否有其他方法可以更好地做到这一点，并且符合Vue最佳实践

因此，当您有一个项目列表，并且希望同时渲染和过滤时，例如使用

v-for

？在这种情况下，您可以使用

转换组

组件。与

transition

不同，这将在下一个sniped中呈现一个实际的元素：like

div

。但是，可以更改使用

标记

属性呈现的元素

注意

内部的元素始终需要具有唯一的键属性

更新 如果您有一个问题，然后想“做点什么”，请仅使用本示例中的

transition

transition

和

transition group

之间的主要区别在于，transition将影响一个组件。这意味着，如果有一个组件要替换为另一个组件，则可以使用transition

newvue({
el:“#vue过渡”，
数据：{
秀:假,，
}
})

简单过渡
Teocci

我们需要了解您的vue实例，您能否将其添加到您的问题中？如我使用的vue版本？v2.5.16值得一读谢谢，我已经通读了这篇文章，但是我发现在不使用v-for循环的情况下，何时在重复的div元素上使用transition group vs transition还不够清楚。因此，任何关于这方面的指导都将非常好！：）这不是我面临的问题。我不确定在哪里使用转换标签（或转换组）。我的vue模型工作正常，并在您开始在输入字段中键入时更新数据对象：）啊，很抱歉，如果您想打印多个问题，请使用

转换组

针对每个问题使用

转换

，因此在我的示例中，您是否建议将它们全部包装在一个过渡组标记中？我更新了我的答案，这个示例可能会对您有所帮助。如果您将所有问题都包装在一个

过渡组中

，您可以验证哪些问题将被过滤。如果我不对div使用v-for，那么它是应该更改为过渡标记还是仍然保留为过渡组标记，每个子div上有不同的键？

<input type="text" :value="vueModel.question1" />
<transition-group name="slide-fade" mode="in-out">
    <div v-if="vueModel.question1 === 'hello'" key="key1">
        //Do something
    </div>
    <div v-else-if="vueModel.question1 === 'hihi'" key="key2">
        //Do something
    </div>
    <div v-else key="key3">
        //Do something
    </div>
</transition-group>

<input type="text" :value="vueModel.question1" />
<transition name="slide-fade" mode="in-out">
    <div v-if="vueModel.question1 === 'hello'" key="key1">
        //Do something
    </div>
    <div v-else-if="vueModel.question1 === 'hihi'" key="key2">
        //Do something
    </div>
    <div v-else key="key3">
        //Do something
    </div>
</transition>