Javascript 表行上的Vuejs转换

我试图在html表格行（vue.js）上进行转换（动画），但没有成功。下面是完整的示例

newvue({
el:'数据'，
数据：{
项目：[
{
数据：“d1”，
更多：错误
},
{
数据：“d2”，
更多：错误
},
]
}
});
.fade进入活动状态，.fade离开活动状态{
过渡：不透明度2s
}
.淡入淡出淡出淡出{
不透明度：0
}





动画
显示隐藏行
{{k+1}}-{{item.data}

转换仅适用于单个渲染元素

如果我们在元素内部移动转换，它就会工作

还应研究过渡组的使用，这可能有助于
尝试完全删除标记，并执行以下操作：

 <tr name="fade" is="transition" v-bind:key="item.data" v-if="item.more">



资料来源：

小提琴：

更新：

我们最终使用了一个过渡组：

<tbody name="fade" is="transition-group">
    <tr class="row" v-bind:key="item.data" v-if="item.more">
      <td><p >{{k + 1}} - {{item.data}}</p></td>
     </tr>
</tbody>


{{k+1}}-{{item.data}


正如这里所建议的：

Fiddle:
首先，我想指出，如果您使用了字符串模板，那么问题中的代码将按原样工作


console.clear（）
新Vue({
el:'数据'，
模板：`




动画
显示隐藏行
{{k+1}}-{{item.data}

`,
数据：{
项目：[
{
数据：“d1”，
更多：错误
},
{
数据：“d2”，
更多：错误
},
]
}
});
.fade进入活动状态，.fade离开活动状态{
过渡：不透明度2s
}
.淡入淡出淡出淡出{
不透明度：0
}

谢谢，但我已经试过了，但没有成功。你能提供一个例子吗？我认为@mikl使用的是
表示单数元素，所以你的答案不正确。“{{k+1}}-{item.data}
..”我看到您已经将转换移到了tr元素中，这并不完全是我想要做的，所以它的工作原理与其他注释类似：{k+1}-{item.data}”
谢谢，但不起作用。在这里提问之前，我忘了提到我已经尝试过使用基本谷歌搜索找到的示例（在我的示例中，@Terry提到我正在处理单个元素，请参阅使用的键）更准确地说，你建议只在关闭/隐藏阶段工作，而不是在showI中。我用一把工作小提琴更新了答案。我认为将项用作键而不是项时出错。数据，因为Vue更希望您使用字符串或数字而不是对象为项设置键。有趣的是，您能否提供有关此事实的链接，因为现在与对象或字符串没有区别，在显示项阶段仍然无法工作。我在控制台中收到警告：[Vue warn]当前位置必须键入儿童：我认为代码有点混乱。你可能正在寻找的是。