Vue中的列表过度

最新推荐文章于 2023-03-01 08:46:12 发布

西门吃雪……

最新推荐文章于 2023-03-01 08:46:12 发布

阅读量149

点赞数

分类专栏： vue 学习记录

本文链接：https://blog.csdn.net/xiaonanhaijing/article/details/109673376

版权

本文介绍了在Vue中如何为列表添加过度效果，强调了避免使用index作为key，并提供了优化的写法示例。

摘要由CSDN通过智能技术生成

demo1.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的列表过度</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="root"></div>

    <script>
        var vm = new Vue({
   
            el: "#root"
        })
    </script>

</body>

</html>

demo2
我们书写一个循环
记住最好不要用index作为key值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的列表过度</title>
    <script src="./vue.js"