vue实现本地存储添加删除修改功能
程序员文章站
2022-06-24 16:59:29
本文实例为大家分享了vue实现本地存储添加删除修改的具体代码，供大家参考，具体内容如下实现功能：输入的内容添加到正在进行列表中，双击修改功能，点击esc键，取消，还是之前的内容，点击回车，修改成功，修...
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。