1、引入Vue.js

2、编写代码

代码

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.         <title>Vue 和 localstorage 的结合使用（版本一）</title>
  8.         <style>
  9.             .main {
  10.                 border: 3px solid antiquewhite;
  11.                 width: 500px;
  12.                 height: 600px;
  13.                 margin: auto;
  14.             }
  15.  
  16.             .top {
  17.                 border: 2px solid aquamarine;
  18.                 width: 450px;
  19.                 height: 200px;
  20.                 margin: auto;
  21.                 margin-top: 10px;
  22.                 text-align: center;
  23.             }
  24.  
  25.             .content {
  26.                 border: 4px solid aliceblue;
  27.                 width: 450px;
  28.                 height: 350px;
  29.                 margin: auto;
  30.                 margin-top: 20px;
  31.             }
  32.  
  33.             .top input {
  34.                 margin-top: 10px;
  35.                 height: 25px;
  36.                 width: 60%;
  37.                 margin-left: 20px;
  38.             }
  39.  
  40.             .top label {
  41.                 display: flex;
  42.                 margin-left: 35px;
  43.                 height: 100px;
  44.             }
  45.  
  46.             .top label>textarea {
  47.                 margin-left: 20px;
  48.                 width: 270px;
  49.             }
  50.  
  51.             .top button {
  52.                 margin-left: 270px;
  53.                 background: #7FFFD4;
  54.                 width: 65px;
  55.             }
  56.  
  57.             .content>div div {
  58.                 border: 3px solid #F0F8FF;
  59.                 height: 30px;
  60.                 margin-top: 4px;
  61.                 padding-top: 10px;
  62.             }
  63.  
  64.             .content>div>div a {
  65.                 float: right;
  66.             }
  67.         </style>
  68.     </head>
  69.     <body>
  70.  
  71.         <script src="js/vue.js"></script>
  72.         <div id="app" class="main">
  73.  
  74.             <div class="top">
  75.                 <div>
  76.                     用户名:<input type="text" v-model="author" />
  77.                     <p></p>
  78.                     <label>
  79.                         <span>评论内容:</span>
  80.                         <textarea v-model="content"></textarea>
  81.                     </label>
  82.                     <p><button @click='saveData'>发布</button></p>
  83.                 </div>
  84.             </div>
  85.  
  86.             <div class="content">
  87.                 <div v-for="data in datas" >
  88.                     <div>{{data.key}}：{{data.value}} <a href @click.prevent='del(data.id)'>删除此评论</a></div>
  89.                 </div>
  90.             </div>
  91.  
  92.         </div>
  93.         <script>
  94.             new Vue({
  95.                 el:"#app",
  96.                 data:{
  97.                     datas:[],
  98.                     author:"",
  99.                     content:""
  100.                 },
  101.                 methods:{
  102.                     saveData(){
  103.                         //将用户名存储到localstorage中
  104.                         localStorage.setItem("input_author",this.author);
  105.  
  106.                         if(this.author.trim() === ""){
  107.                             return alert("小兄弟，请先输入用户名啊！！！！");
  108.                         }
  109.  
  110.                         if(this.content.trim() === ""){
  111.                             return alert("大兄弟,你输入一下内容呗!!!!!");
  112.                         }
  113.                         //将用户名和对应的内容push到数组中
  114.                         this.datas.push({
  115.                             id:+new Date(),
  116.                             key:this.author,
  117.                             value:this.content
  118.                         });
  119.                         //更新
  120.                         this.updateData();
  121.  
  122.                     },
  123.                     updateData(){
  124.                         //将数组序列化成字符串存入localstorage中
  125.                         localStorage.setItem("author_content",JSON.stringify(this.datas));
  126.                     },
  127.                     del(id){
  128.                         //根据id过滤datas中的数组
  129.                         this.datas = this.datas.filter( (c) => c.id != id );//简写
  130.  
  131. //                         this.datas= this.datas.filter(function(c){
  132. //                             return c.id != id;
  133. //                         })
  134.  
  135.                         //更新数据
  136.                         this.updateData();
  137.                     }
  138.                 },
  139.                 created(){
  140.                     //取到上一次的用户名
  141.                     var author = localStorage.getItem("input_author");
  142.                     if(author){
  143.                         this.author = author;
  144.                     }
  145.                     //取出localstorage中的评论数据
  146.                     var content = localStorage.getItem("author_content");
  147.                     if(content){
  148.                         //将存在localstorage中的数据取出,并序列化储成对象存入数组中
  149.                         this.datas = JSON.parse(content);
  150.                     }
  151.                 }
  152.             });
  153.         </script>
  154.     </body>
  155. </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. Linux常用命令详解（1）

    基础命令: ls man pwd cd mkdir echo touch cp mv rm rmdir cat more less head tail clear poweroff reboot 命令 ...

  2. js继承的方式及其优缺点

    js继承方法 前因:ECMAScript不支持接口继承,只支持实现继承 一.原型链 概念:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针,让 ...

  3. Elasticsearch Metric聚合

    首先查看index文档信息 $ curl -XGET "http://172.16.101.55:9200/_cat/indices?v" 输出 health status ind ...

  4. [转帖]【JDK和Open JDK】平常使用的JDK和Open JDK有什么区别

    https://www.cnblogs.com/sxdcgaq8080/p/7487369.html 其实不同的 openjdk的版本也不一样. atlassian说AdoptOpenJDK我们测试充 ...

  5. CSP 字符串匹配(201409-3)

    问题描述 给出一个字符串和多行文字,在这些文字中找到字符串出现的那些行.你的程序还需支持大小写敏感选项:当选项打开时,表示同一个字母的大写和小写看作不同的字符:当选项关闭时,表示同一个字母的大写和小写 ...

  6. python-day10(正式学习)

    目录 字符编码 计算机基础 文本编辑器存取文件的原理 python解释器执行py文件的原理 python解释器与文本编辑的异同 字符编码介绍 字符编码的分类 乱码分析 总结 文件操作 三种基本操作 文 ...

  7. Django 模版语法与使用

    目录 Django 模版语法与使用 django模板语言介绍 (摘自官方文档) 链接 什么是模板? 模板语句的 注释 变量 {{ 变量 }} 点(.)在模板语言中有特殊的含义,用来获取对象的相应属性值 ...

  8. 滚动页面产生动画WOW.js的用法

    简介 在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件.WOW.js 依赖 animate.css,所以它支持 an ...

  9. go语言坑之并发访问map

    fatal error: concurrent map read and map write 并发访问map是不安全的,会出现未定义行为,导致程序退出.所以如果希望在多协程中并发访问map,必须提供某 ...

  10. Storm的基本概念

    Storm的基本概念 Topology:拓扑,也俗称一个任务,类似于MapReduce中的job.将Spout.Bolt整合起来的拓扑图.定义了Spout和Bolt的结合关系.并发数量.配置等等. S ...