使用Vue做个简单的评论 + localstorage存储

 1、引入Vue.js

2、编写代码

代码

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Vue 和 localstorage 的结合使用（版本一）</title>
        <style>
            .main {
                border: 3px solid antiquewhite;
                width: 500px;
                height: 600px;
                margin: auto;
            }

            .top {
                border: 2px solid aquamarine;
                width: 450px;
                height: 200px;
                margin: auto;
                margin-top: 10px;
                text-align: center;
            }

            .content {
                border: 4px solid aliceblue;
                width: 450px;
                height: 350px;
                margin: auto;
                margin-top: 20px;
            }

            .top input {
                margin-top: 10px;
                height: 25px;
                width: 60%;
                margin-left: 20px;
            }

            .top label {
                display: flex;
                margin-left: 35px;
                height: 100px;
            }

            .top label>textarea {
                margin-left: 20px;
                width: 270px;
            }

            .top button {
                margin-left: 270px;
                background: #7FFFD4;
                width: 65px;
            }

            .content>div div {
                border: 3px solid #F0F8FF;
                height: 30px;
                margin-top: 4px;
                padding-top: 10px;
            }

            .content>div>div a {
                float: right;
            }
        </style>
    </head>
    <body>

        <script src="js/vue.js"></script>
        <div id="app" class="main">

            <div class="top">
                <div>
                    用户名:<input type="text" v-model="author" />
                    <p></p>
                    <label>
                        <span>评论内容:</span>
                        <textarea v-model="content"></textarea>
                    </label>
                    <p><button @click='saveData'>发布</button></p>
                </div>
            </div>

            <div class="content">
                <div v-for="data in datas" >
                    <div>{{data.key}}：{{data.value}} <a href @click.prevent='del(data.id)'>删除此评论</a></div>
                </div>
            </div>

        </div>
        <script>
            new Vue({
                el:"#app",
                data:{
                    datas:[],
                    author:"",
                    content:""
                },
                methods:{
                    saveData(){
                        //将用户名存储到localstorage中
                        localStorage.setItem("input_author",this.author);
                        
                        if(this.author.trim() === ""){
                            return alert("小兄弟，请先输入用户名啊！！！！");
                        }
                        
                        if(this.content.trim() === ""){
                            return alert("大兄弟,你输入一下内容呗!!!!!");
                        }
                        //将用户名和对应的内容push到数组中
                        this.datas.push({
                            id:+new Date(),
                            key:this.author,
                            value:this.content
                        });
                        //更新
                        this.updateData();
                        
                    },
                    updateData(){
                        //将数组序列化成字符串存入localstorage中
                        localStorage.setItem("author_content",JSON.stringify(this.datas));
                    },
                    del(id){
                        //根据id过滤datas中的数组
                        this.datas = this.datas.filter( (c) => c.id != id );//简写
                        
//                         this.datas= this.datas.filter(function(c){
//                             return c.id != id;
//                         })
                        
                        //更新数据
                        this.updateData();
                    }
                },
                created(){
                    //取到上一次的用户名
                    var author = localStorage.getItem("input_author");
                    if(author){
                        this.author = author;
                    }
                    //取出localstorage中的评论数据
                    var content = localStorage.getItem("author_content");
                    if(content){
                        //将存在localstorage中的数据取出,并序列化储成对象存入数组中
                        this.datas = JSON.parse(content);
                    }
                }
            });
        </script>
    </body>
</html>

运行结果：

 

Vue示例下载地址(Vue，Vue模块化)：https://github.com/oukele/VueAndLocalstorage

 

^_^，每天保持心情的愉悦。 

posted @ 2018-11-20 10:33  追梦滴小蜗牛  阅读(1097)  评论(0)  编辑  收藏  举报