Vue练习 - 操作list数组

 

<template>
    <div>
        <div style="width: 900px; margin: 30px 50px;">
            <el-button type="primary" plain @click="insert">insert</el-button>
            <el-button type="primary" plain @click="insertRandom">insert at random index</el-button>
            <el-button type="danger" plain @click="del">del</el-button>
            <el-button type="info" plain @click="shuffle">shuffle</el-button>
            <el-button type="info" plain @click="reverse">reverse</el-button>
            <el-button type="warning" plain @click="reset">reset</el-button>
            <el-button type="success" plain @click="sort">sort</el-button>

            <TransitionGroup tag="ul" name="fade" class="container">
                <div v-for="item in items" class="item" :key="item">
                    {{ item }}
                    <button @click="remove(item)">x</button>
                </div>
            </TransitionGroup>
        </div>
    </div>
</template>

<!--
通过内建的 <TransitionGroup> 实现“FLIP”列表过渡效果。
https://aerotwist.com/blog/flip-your-animations/
-->

<script>
// Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库 (安装 npm i lodash-es)
import { shuffle, cloneDeep, throttle, debounce } from 'lodash-es'

const getInitialItems = () => [1, 2, 3, 4, 5]
let id = getInitialItems().length + 1

export default {
    data() {
        return {
            items: getInitialItems(),
            delMessage: '最少预留一条数据',
        }
    },
    methods: {
        remove(item) {
            if (this.items.length > 1) {
                const i = this.items.indexOf(item)
                if (i > -1) {
                    this.items.splice(i, 1)
                }
                // 方法二： 使用新的数组替代原数组，过滤掉当前被选中的值
                // this.items = this.items.filter((t) => t !== item)
            } else {
                this.delMessageWarn()
            }

        },
        insert() {
            // max 每次从最大数开始增加
            var max = Math.max.apply(null, this.items);
            this.items.push(max + 1)
        },
        del() {
            debugger
            if (this.items.length > 1) {
                //获取数组中最大值的下标
                let arr = this.items
                //声明了个变量 保存下标值
                var max = arr[0];
                var maxIndex = 0;
                for (var i = 0; i < arr.length; i++) {
                    if (max < arr[i]) {
                        max = arr[i];
                        maxIndex = i;
                    }
                }
                // this.items.pop(max) 只能删除数组中最后一位
                this.items.splice(maxIndex, 1)
            } else {
                this.delMessageWarn()
            }
        },
        insertRandom() {
            var max = Math.max.apply(null, this.items);
            const i = Math.round(Math.random() * this.items.length)
            this.items.splice(i, 0, max + 1)
            // this.items.splice(i, 0, id++)
        },
        shuffle() {
            this.items = shuffle(this.items)
            this.$message('已随机排序');
        },
        // 冒泡排序 两两比较待排序的关键字，并交换不满足次序要求的那对数，直到整个表都满足次序要求为止。
        sort() {
            // this.items.sort()  仅适用10位以内排序
            let temp = 0; // 用来交换的临时数
            // 要遍历的次数
            for (let i = 0; i < this.items.length - 1; i++) {
                // 从后向前依次的比较相邻两个数的大小，遍历一次后，把数组中第i小的数放在第i个位置上
                for (let j = this.items.length - 1; j > i; j--) {
                    // 比较相邻的元素，如果前面的数大于后面的数，则交换
                    if (this.items[j - 1] > this.items[j]) {
                        temp = this.items[j - 1];
                        this.items[j - 1] = this.items[j];
                        this.items[j] = temp;
                    }
                }
            }
            // 由于 JavaScript 的限制，Vue不能检测到对象属性的添加或删除
            // $forceUpdate 适用于那些无法被 vue 监听到了 data 属性操作，比如对对象、数组的修改；
            // 或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态，比如某个 data 属性被 Object.freeze() 冻结了等等情况。
            this.$forceUpdate();
            this.$message({
                message: '排序完成',
                type: 'success'
            });
        },
        reset() {
            this.items = getInitialItems()
            this.$message({
                message: '已重置',
                type: 'warning'
            });
        },
        reverse() {
            this.items.reverse()
            this.$message('已颠倒顺序');
        },
        delMessageWarn() {
            this.$message.error(this.delMessage);
            return
        }
    }
}
</script>

<style>
.container {
    width: 76.5%;
    position: relative;
    padding: 0;
}

.item {
    width: auto;
    padding-left: 10px;
    height: 37px;
    background-color: #f3f3f3;
    border: 1px solid rgba(7, 166, 240, 0.624);
    box-sizing: border-box;
}

/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    transform: scaleY(0.01) translate(30px, 0);
}

/* 3. 确保离开的项目被移除出了布局流
      以便正确地计算移动时的动画效果。 */
.fade-leave-active {
    position: absolute;
}

el-button {
    margin-right: 12px;
    margin-top: 3px;
}

button {
    margin-top: 6px;

}
</style>