vue -留言板留言板的功能请输入内容添加留言删除留言还没有留言，请添加留言超出5个显示展开更多。否则

留言板 * { margin: 0; padding: 0; list-style: none; } .list li { display: flex; padding: 10px; border-bottom: 1px solid #999; justify-content: space-between; } </style>

添加

留言 {{list.length}}

{{i+1}} {{item.text}} x

还没有留言，请添加留言

<script>
    // 添加
    new Vue({
        el: "#app",
        data: {
            ln: 5, // ln有关系  //只显示前五个
            val: "",
            list: [
                {
                    id: 1,
                    text: "aaaa",
                    create_at: new Date()
                },
                {
                    id: 2,
                    text: "bbb",
                    create_at: new Date()
                }
            ]
        },
        methods: {
            addList() {
                // console.log(Date.now(), '时间戳')
                // push unshift
                // [...]
                // 是否添加的判断  every 
                let result = this.list.filter(item => item.text === this.val)
                if (result.length) {
                    alert("已经添加过了")
                    return;
                }
                this.list = [{ id: Date.now(), text: this.val, create_at: new Date() }, ...this.list]
                this.val = ''
            },
            //删除
            delList(id) {
                // filter 
                this.list = this.list.filter(item => item.id !== id)
            },
            changeLn() {
                // 5  length
                // 明白 1
                this.ln = this.ln == 5 ? this.list.length : 5
            }
        }
    })
</script>