vue实现本地存储添加删除修改功能
本文实例为大家分享了vue实现本地存储添加删除修改的具体代码，供大家参考，具体内容如下
实现功能：
输入的内容添加到正在进行列表中，
双击修改功能，
点击esc键，取消，还是之前的内容，
点击回车，修改成功，
修改框失焦时修改成功，
选中按钮时进入已完成列表，未选中时在正在进行中列表，
点击删除进行删除当行，
本地存储下次打开上次添加的还在
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
ul{
list-style: none;
}
li{
width: 220px;
height: 40px;
border: 1px solid gainsboro;
margin-top: 4px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #6CE26C;
}
.del{
margin-right: 5px;
border: none;
width: 20px;
height: 20px;
background-color: #008200;
}
</style>
</head>
<body>
<div id="app">
<!-- 过滤输入内容首尾空白符 -->
<!-- 回车事件 -->
<input type="text" v-model.trim="temp" @keyup.enter="additem()"/>
<!-- 获取正在进行的数量 -->
<h3>正在进行中{{undolist.length}}</h3>
<ul class="list">
<!-- 将正在进行的内容遍历显示出来 -->
<li class="item" v-for="item in undolist" :key="item.name">
<div class="">
<!-- 多选框为未选中false状态 -->
<input type="checkbox" v-model="item.done" />
<!-- 默认为state是0，当双击时state为1，内容赋给tempEdit-->
<span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
<!-- input框内容为tempEdit的值，state=1时显示输入框，
点击esc时state为零隐藏，内容还是原来的值，不进行修改，
当回车时state为0就隐藏input框，将修改过得tempEdit，赋给item.name
当失焦时state为0就隐藏input框，将修改过得tempEdit，赋给item.name
-->
<input type="text" v-model="tempEdit" v-show="item.state==1"
@keyup.esc="item.state=0;tempEdit=item.name"
@keyup.enter="item.state=0;item.name=tempEdit"
@blur="item.state=0;item.name=tempEdit"
/>
</div>
<!-- 点击删除时删除其内容 -->
<button type="button" @click="removeitem(item)" class="del">X</button>
</li>
</ul>
<!-- 已完成数量 -->
<h3>已经完成{{doneList.length}}</h3>
<ul class="list">
<!-- 将已完成的内容遍历显示出来 -->
<li class="item" v-for="item in doneList" :key="item.name">
<div class="">
<!-- 多选框为选中true状态 -->
<input type="checkbox" v-model="item.done" />
<!-- 默认为state是0，当双击时state为1，内容赋给tempEdit-->
<span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
<!-- input框内容为tempEdit的值，state=1时显示输入框，
点击esc时state为零隐藏，内容还是原来的值，不进行修改，
当回车时state为0就隐藏input框，将修改过得tempEdit，赋给item.name
当失焦时state为0就隐藏input框，将修改过得tempEdit，赋给item.name
-->
<input type="text" v-model="tempEdit" v-show="item.state==1"
@keyup.esc="item.state=0;tempEdit=item.name"
@keyup.enter="item.state=0;item.name=tempEdit;"
@blur="item.state=0;item.name=tempEdit;"
/>
</div>
<!-- 点击删除时删除其内容 -->
<button type="button" @click="removeitem(item)" class="del">X</button>
</li>
</ul>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data(){
return{
// 清单列表
// getItem是获取本地存储数据，
// ||"[]"如果获取不到转换为空的数组
list:JSON.parse(localStorage.getItem("list")||"[]"),
// 临时添加的数据存放处
temp:'',
// 修改框的临时数据存放处
tempEdit:''
}
},
methods:{
// 添加
additem(){
// 文本框为空时就返回
if(this.temp===""){return;}
// 添加到后面
this.list.push({
name:this.temp,
done:false,
state:0
})
// 清空临时框
this.temp="";
},
// 删除
removeitem(item){
// 弹框
var flag=window.confirm("确定要删除吗？");
if(flag){
// 查找符合条件元素的索引值
var ind=this.list.findIndex(value=>value.title===item.title);
// splice从第ind删除一个
this.list.splice(ind,1);
}
}
},
computed:{
// 通过计算把现有的list数据计算出已完成和未完成
// 未完成
undolist(){
// filter数组的过来函数，如果返回结果为真则当前遍历的数据保留
// 否则就会被过滤掉
return this.list.filter(item=>!item.done);
},
// 已完成
doneList(){
return this.list.filter(item=>item.done);
}
},
watch:{
"list":{
handler(){
// setItem设置本地数据
// JSON.stringify把js对象转换为json字符串
// JSON.prase把字符串转换为js对象
localStorage.setItem("list",JSON.stringify(this.list))
},
deep:true,
}
}
})
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
详解Vue2 无限级分类(添加,删除,修改)
本人对vue不是很懂,搜索了很多关于Vue2 无限级分类介绍,下面我来记录一下,有需要了解Vue2 无限级分类的朋友可参考.希望此文章对各位有所帮助. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 树</title> <script src="https://unpkg.com/
-
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
1.表格动态添加,也可删除 <template> <div class="TestWord"> <el-button @click="addLine">添加行数</el-button> <el-button @click="save">保存</el-button> <el-table :data="tableData" style="wid
-
vue实现本地存储添加删除修改功能
本文实例为大家分享了vue实现本地存储添加删除修改的具体代码,供大家参考,具体内容如下 实现功能: 输入的内容添加到正在进行列表中, 双击修改功能, 点击esc键,取消,还是之前的内容, 点击回车,修改成功, 修改框失焦时修改成功, 选中按钮时进入已完成列表,未选中时在正在进行中列表, 点击删除进行删除当行, 本地存储下次打开上次添加的还在 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&
-
Vue 浏览器本地存储的问题小结
目录 localstorage SessionStorage 总结 TodoList 改为本地存储 localstorage <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浏览器本地存储</title> </head> <body> <div id="root&q
-
vue element实现表格增加删除修改数据
本文实例为大家分享了vue element实现表格增加删除修改数据的具体代码,供大家参考,具体内容如下 这里用到是设置一个弹出框来实现此功能,还有一种方法是直接在原来的基础上面进行修改 效果如下: 表格的table: <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width=&q
-
用SQL语句添加删除修改字段、一些表与字段的基本操作、数据库备份等
用SQL语句添加删除修改字段 1.增加字段 alter table docdsp add dspcode char(200) 2.删除字段 ALTER TABLE table_NAME DROP COLUMN column_NAME 3.修改字段类型 ALTER TABLE table_name ALTER COLUMN column_name new_data_type 4.sp_rename 改名 更改当前数据库中用户创建对象(如表.列或用户定义数据类型)的名称. 语法 sp_rename
-
angularJs 表格添加删除修改查询方法
如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="agl/angular.min.js"></script> <script> var app=angular.module("
-
Vue 仿QQ左滑删除组件功能
前几天在做Vue项目开发的时候,因为之前别人写的代码有点小 bug,有人反应 IOS 上面的滑动点击有点问题,于是让我来帮忙解决,我看了看以前的代码实现比较繁琐,冗余,索性就直接自己重新写了一套,供大家参考,如有更好的方式,欢迎及时交流~ 我们先看看效果图吧,毕竟无图无真相啊~ 效果图 实现思路 具体实现思路如下: 布局方面我采用的是 rem + flex 布局,具体如何结构和样式可以参考我的代码,值得注意的是后面的删除按钮是我通过定位放在了每一行的最后,超出隐藏了而已 左滑和右滑是通过 tou
-
WinForm中DataGridView添加,删除,修改操作具体方法
1.添加操作,代码如下: 复制代码 代码如下: IList<SelfRun> selfRunConfigs = new List<SelfRun>();private void btnNewConfig_Click(object sender, EventArgs e){try{string _lampNo = UpDownSelfLampNo.Value.ToString();int _ctrlGpNo = Convert.ToInt16(UpDownCtrlGpCnt.Valu
-
Android GridView扩展仿微信微博发图动态添加删除图片功能
在平时的开发中,我们会看到不管是微信发朋友圈照片还是微博发布新鲜事,添加图片的时候都是选完后面还有个+号再去选择图片,这样的话比较方便用户去添加图片,有的右上角还有个-号方便用户去删除图片,而一般用户选择的图片多少都是不定的,我们只限制最大张数,我们用gridview去实现,代码可能比较简单,高手请略过. 0.效果图 1.准备资源图片 添加图片的+号图片 删除图片的图片 2.可设置限制用户选择最大张数 /** * 可以动态设置最多上传几张,之后就不显示+号了,用户也无法上传了 * 默认9张 */
-
JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用
目录 前提知识 范例 示例1:将键值对提供给本地存储 示例2: 本地存储中设置键值对 示例3: 获取空值 示例 4:将数组存储在本地存储中 示例 5:从本地存储中获取数组 示例 6:从本地存储中获取数组? 示例 7:清除本地存储 示例 8:仅从本地存储中删除 Name1 键值对 会话存储 总结 我不会告诉你任何定义和概念,上车,读完这篇博客,你就会对本地存储(Local Storage) 和 会话存储(Session Storage)有一个清晰的认识. 前提知识 请按照我以下的步骤来: 1.在任