Cynciya_ 2022-05-09 22:13 采纳率: 80%
浏览 154
已结题

Vue 使用lodash.js完成列表添加、删除、打乱顺序

使用lodash.js完成列表添加、删除、打乱顺序。并在添加、删除、打断顺序时实现过渡效果，效果如下图：

img

我写出了下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习5</title>
    <script src="../js/vue.js"></script>
    <style>
        .list-item {
            display: inline-block;
            margin-right: 10px;
            background-color: red;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            color: #fff;
        }
        .list-enter-active, .list-leave-active {
            transition: all 1s;
        }
        .list-enter, .list-leave-to {
            opacity: 0;
            transform: translateY(30px);
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="add">随机添加</button>
        <button @click="remove">随机删除</button>
        <button @click="shuffle">打乱顺序</button>
        <transition-group name="'list" tag="p">
            <span v-for="item in items" :key="item" class="list-item">
                {{item}}
            </span>
        </transition>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                items: [1,2,3,4,5],
                nextNum: 6
            },
            methods: {
                add () {
                    this.nextNum = Math.floor(Math.random() * 10);
                    var index = Math.floor(Math.random() * this.items.length);
                    this.items.splice(index, 0, this.nextNum)
                },
                remove () {
                    var index = Math.floor(Math.random() * this.items.length);
                    this.removedNum = this.items[index];
                    this.items.splice(index,1)
                },
                shuffle () {
                    
                }
            }
        }) 
    </script>
   
</body>
</html>

如何实现打乱顺序的方法和如图给出的样式？

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-05-09 23:00
    关注

    直接Math.random随机排序，不一定用lodash.js
    transition-group 标签未闭合，并且name属性值多了单引号，示例代码如下

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习5</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .list-item {
            display: inline-block;
            margin-right: 10px;
            background-color: red;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            color: #fff;
        }

        .list-enter-active, .list-leave-active {
            transition: all 1s;
        }

        .list-enter, .list-leave-to {
            opacity: 0;
            transform: translateY(30px);
        }
        #app button{border:dotted 1px blue;border-radius:5px;width:100px;height:30px}
        #app .list-item{border:dotted 2px green;border-radius:5px;background:#efefef;color:#f00;width:30px;height:30px;line-height:30px}
    </style>
</head>
<body>
    <div id="app">
        <button @click="add">随机添加</button>
        <button @click="remove">随机删除</button>
        <button @click="shuffle">打乱顺序</button>
        <transition-group name="list" tag="p">
            <span v-for="item in items" :key="item" class="list-item">
                {{item}}
            </span>
        </transition-group>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                items: [1, 2, 3, 4, 5],
                nextNum: 6
            },
            methods: {
                add() {
                    this.nextNum = Math.floor(Math.random() * 10);
                    var index = Math.floor(Math.random() * this.items.length);
                    this.items.splice(index, 0, this.nextNum)
                },
                remove() {
                    var index = Math.floor(Math.random() * this.items.length);
                    this.removedNum = this.items[index];
                    this.items.splice(index, 1)
                },
                shuffle() {
                    var nItems = JSON.parse(JSON.stringify(this.items));
                    nItems = nItems.sort(function () { return Math.random() < .5 ? 1 : -1; });
                    while (this.items.length) this.items.pop();
                    setTimeout(() => {
                        for (var v of nItems) this.items.push(v)
                    }, 1000)
                    
                }
            }
        })
    </script>

</body>
</html>

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 5月14日
  • 已采纳回答 5月14日
  • 创建了问题 5月9日

悬赏问题

  • ¥15 smptlib使用465端口发送邮件失败
  • ¥200 总是报错，能帮助用python实现程序实现高斯正反算吗？有偿
  • ¥15 对于squad数据集的基于bert模型的微调
  • ¥15 为什么我运行这个网络会出现以下报错？CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败
  • ¥15 树莓派5怎么用camera module 3啊
  • ¥20 java在应用程序里获取不到扬声器设备
  • ¥15 echarts动画效果的问题，请帮我添加一个动画。不要机器人回答。
  • ¥15 Attention is all you need 的代码运行