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. 【AMAD】betamax -- 一个ruby-VCR的模仿品,只支持requests

    简介 动机 作用 用法 个人评分 简介 betamax1会记录你的HTTP操作,可以让你在测试的时候不必重复进行真实的请求. 动机 如果你的代码需要和外部资源一起运作,那么测试这段代码的方法就叫做集成 ...

  2. Java小技巧:怎么循环日期?

    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");try{//起始日期Date start = sdf.parse ...

  3. 3.Java和hadoop的安装

    先创建目录 [hadoop@node1 opt]$ cd /opt [hadoop@node1 opt]$ sudo mkdir /opt/softwares [hadoop@node1 opt]$ ...

  4. spring依赖注入三种方式

    一.构造器注入 构造器注入是在程序中实现构造器,可以注入任意类型,如自定义类,集合,String等,注:构造器所有有final修饰的变量都必须在构造方法中注入. 二.设值注入(setter方式注入) ...

  5. 使用chattr禁止文件被删除

    chattr 是个啥? chattr 修改文件在Linux第二扩展文件系统(E2fs)上的特有属性 使用方法 +i or -i 设置/取消文件不能进行修改:即你不能删除它, 也不能给它重新命名,你不能 ...

  6. spark教程(10)-sparkSQL

    sparkSQL 的由来 我们知道最初的计算框架叫 mapreduce,他的缺点是计算速度慢,还有一个就是代码比较麻烦,所以有了 hive: hive 是把类 sql 的语句转换成 mapreduce ...

  7. The Party and Sweets CodeForces - 1159C (拓排)

    优化连边然后拓排. #include <iostream> #include <sstream> #include <algorithm> #include < ...

  8. Java——BufferedImage对象

    BufferedImage对象中最重要的两个组件是Raster与ColorModel,分别用于存储图像的像素数据和颜色数据. 1.Raster对象的作用与像素存储 BufferedImage支持从Ra ...

  9. 利用Mocking Framework 单元测试Entity Framework

    一.前言 在实际编写程序时,往往需要与数据库打交道,在单元测试中直接使用数据库又显得太重,如果可以方便的编写一些测试数据,这样更易于检测功能.如何模拟数据库行为便是本篇的主题.微软有教程说明Moq E ...

  10. 构造器(Constructor)--构造函数

    构造器是类型的成员之一,其他成员比如,成员字段,成员函数.狭义上,构造器指的是实例构造器(instance constructor) class Student { public int ID; pu ...