用vue写储存在localStorage中的评论列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <lol @fn="contentList"></lol>
    <ul class="list-group">
        <li v-for="(item,index) in list" class="list-group-item" @dblclick="remove(index)" :key="item.id">
            <span class="badge">评论人: {{item.user}}</span>
            {{item.content}}
        </li>
    </ul>
</div>
<template id="box">
    <div>
        <div class="form-group">
            评论人: <input type="text" class="form-control" v-model="user">
        </div>
        <div class="form-group">
            评论内容: <textarea class="form-control" v-model="content"></textarea>
        </div>
        <div class="form-group">
            <button class="btn btn-primary" @click="add">发表评论</button>
        </div>
    </div>
</template>

<script src="js/vue-2.4.0.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            list: [],
        },
        methods: {
            contentList() {
                let str = localStorage.getItem('lolHistroy') || '[]';
                let arr = JSON.parse(str);
                this.list = arr;
            },
            //删除
            remove(index) {
                let str = localStorage.getItem('lolHistroy') || '[]';
                let arr = JSON.parse(str);
                arr.splice(index, 1);
                console.log(arr);
                localStorage.setItem('lolHistroy', JSON.stringify(arr))
                this.list=arr;
            }
        },
        created() {
            this.contentList();
        },
        components: {
            'lol': {
                template: '#box',
                data() {
                    return {
                        user: '',
                        content: '',
                    }
                },
                methods: {
                    add() {
                        if (!this.user.trim().length || !this.content.trim().length) return false;
                        let str = localStorage.getItem('lolHistroy') || "[]";
                        let arr = JSON.parse(str);
                        let content = {id: Date.now(), user: this.user, content: this.content};
                        arr.unshift(content);
                        this.user = this.content = '';
                        console.log(arr);
                        localStorage.setItem('lolHistroy', JSON.stringify(arr))
                        this.$emit('fn')
                    },
                }
            }
        }

    })
</script>

</body>
</html>
用vue写储存在localStorage中的评论列表

猜你喜欢
