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

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

使用Vue做个简单的评论 + localstorage存储的更多相关文章

  1. 使用Vue做评论+localStorage存储（js模块化）

    未分模块化 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  2. 用 Vue 做一个简单的购物app

    前言 最近在学习Vue的使用.看了官方文档之后,感觉挺有意思的.于是着手做了一个简单的购物app.h5 与原生 app 交互的原理这是我第一次在这个网站上写分享,如有不当之处,请多多指教. 一整个项目 ...

  3. vue做的简单购物车

    <code><!DOCTYPE html><html><head lang="en"> <meta charset=" ...

  4. vue 做一个简单的TodoList

    目录结构 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  5. 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客

    koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...

  6. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  7. MUI框架-05-用MUI做一个简单App

    MUI框架-05-用MUI做一个简单App MUI 是一个前端框架,前端框架就像 Bootstrap,EasyUI,Vue ,为了做 app 呢,就有了更加高效的 MUI,我觉得前端框架有很多,也没有 ...

  8. 前台vue的使用简单小结

    前台vue的使用简单小结 本项目要求:安装有node.js 6.0以及以上安装npm使用vue.js官方安装方法初始化项目npm install安装VueResurce:npm install vue ...

  9. Vue 变异方法splice删除评论功能

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. C学习笔记-内存管理

    作用域 一个C语言变量的作用域可以是代码块 作用域,函数作用域或者文件作用域 代码块是{}之间的一段代码 同一个代码块不可以有重名变量 auto自动变量 一般情况下代码块内部定义的变量都是自动变量 也 ...

  2. C#4.0中的协变和逆变

    原文地址 谈谈.Net中的协变和逆变 关于协变和逆变要从面向对象继承说起.继承关系是指子类和父类之间的关系:子类从父类继承所以子类的实例也就是父类的实例.比如说Animal是父类,Dog是从Anima ...

  3. Linux基础命令---间歇执行命令---watch

    [watch] watch指令可以间歇性的执行程序,将输出结果以全屏的方式显示,默认是2s执行一次. watch指令下发后,将会一直被执行,直到被中断. [语法] watch \ [-d h v t] ...

  4. hdfs基本文件操作

    编程实现下列要求: 1.创建一个自己姓名首字母的文件夹 2.在文件夹下创建一个hdfstext1.txt文件,项文件内输入“班级学号姓名HDFS课堂测试”的文字内容: 3.在文件夹下在创建一个好的fs ...

  5. AtCoder Beginner Contest 131 Task F. Must Be Rectangular

    Score: 600 points Approach 固定横坐标 $x$,考虑横坐标为 $x$ 的竖直线上最多可以有几个点. Observations 若最初两条竖直线 $x_1$.$x_2$ 上都有 ...

  6. Django创建数据库常用字段及参数

    Django创建数据库常用字段及参数 常用字段 1.models.AutoField 自增列= int(11) 如果没有的话,默认会生成一个名称为 id 的列,如果要显示的自定义一个自增列,必须将给列 ...

  7. golang中格式化符号说明

    %v 值的默认格式表示 %+v 类似%v,但输出结构体时会添加字段名 %#v 值的Go语法表示 %T 值的类型的Go语法表示 %% 百分号 布尔值: %t 单词true或false 整数: %b 表示 ...

  8. 用data的方法获取值的时候，要注意的问题一定要在先封装好

    var art=$(".add-more").prev().find(".content").data("list1"); 我们一定要在aj ...

  9. 基础数据类型之集合和深浅copy，还有一些数据类型补充

    集合 集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 去重,把一个列表变成集合,就自动去重了. 关系 ...

  10. idea 修改pom文件jdk版本回退问题解决

    在Java开发是我们大多都使用集成开发环境,像idea和eclipse用的都比较多,在使用idea maven构建项目时,在修改pom.xml文件时,我们的项目jdk版本都会回退,还得每次去设置中修改 ...