我需要渲染一个item级的div

<div class="ui horizontal list">
    <transition-group name="custom-classes-transition” enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
        <div class="item" v-for="(filter, filterIndex) in filters" :key="filterIndex”> .. </div>
    </transition-group>
</div>

.item应该直接嵌套在.ui.list

我try 添加tag="div”,但这将添加一个新的div与我的div.item

推荐答案

只需在你的transition-group中添加一个classprops .

例子:

<transition-group class="ui horizontal list" name="custom-classes-transition" enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
    <div class="item" v-for="(filter, filterIndex) in filters" :key="filterIndex"> .. </div>
</transition-group>

Vue.js相关问答推荐

使用插槽的VUE 3工作台

vue3中的转换可以在滑入但不能滑出时工作

VITE:无法为VUE单文件组件加载URL

Vue Router中.getRoutes()获取的路由顺序优化建议

为什么 Vue 在将设置脚本中的计算(computed)属性渲染到模板时找不到变量

将 v-calendar 与以时间和日期格式出现的事件一起使用

vue3 + pinia:如何从?store 中获取一个值

Vue Datepicker 不会在渲染时显示默认日期

Vue Js Composition Api 未定义(读取名称)

拖入 vue2-google-map 后如何获取标记位置?

如何解决 Vue.js 中的相邻 JSX 元素必须包含在封闭标记中问题

在重复内容区域中添加

如何在 vue 的 scss 中使用深度 Select 器

使用 v-slot:body 时 Vuetify v-data-table 没有响应

如何修复跨域读取阻塞 (CORB) 阻止了 MIME 类型应用程序/json 的跨域响应问题?

VueJS + VueRouter:有条件地禁用路由

为什么我在 vue.js 中得到避免使用 JavaScript 一元运算符作为属性名称?

使用vue.js单击时如何获取按钮的值

依赖关系甚至在 package.json 和 node_modules 中都没有定义

使用 svelte js 的原因