实现基于功能,具体实现如下:
可以实现对列表中添加,移除以及状态转变,其中添加功能既可以通过鼠标点击按钮实现,也可以通过回车键按下实现,通过使用v模型对选中的值进行双向绑定来完成状态的改变。在本次实际操作中仍存在一个小问题就是方法中函数调用,在完成数据存储前可以通过<代码>。美元options.methods.addFun(); 进行调用。
& lt; div id=坝τ谩北?
& lt;输入类型=拔谋尽眝模型=拔毒盄keydown=発addFun(事件)美元/比;
& lt;按钮@click=" addFun()在添加& lt;/button>
& lt; br/祝辞& lt; br/比;
& lt; h4>进行中& lt;/h4>
& lt; ul>
& lt;李v="(项目、关键)名单”v=? item.checked”祝辞& lt;输入类型=案囱】颉眝模型="项目。检查“@change=" saveList()/比;{{项目。标题}}& lt;按钮@click=" moveFun(关键)”在移除& lt;/button> & lt;/li>
& lt;/ul>
& lt; h4>已完成& lt;/h4>
& lt; ul>
& lt;李v="(项目、关键)名单”v="项目。检查“祝辞& lt; input type="复选框item.checked“v模型=/比;{{项目。标题}}& lt;按钮@click=" moveFun(关键)”在移除& lt;/button> & lt;/li>
& lt;/ul>
& lt;/div>
& lt;脚本src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
应用var=new Vue ({
埃尔:“#应用”,
数据:{
味精:”,
列表:[]
},
方法:{
addFun () {
this.list.push ({
标题:this.msg,
检查:假
}),
这一点。味精=";//存储数据
localStorage.setItem(“列表”,JSON.stringify (this.list))
},
kaddFun (e) {
如果(e.keyCode==13) {
this.addFun ();
}
},
moveFun(键){
确认(“是否移除“+ this.list[主要].title + " & # 63; ");
this.list.splice(键,1);
localStorage.setItem(“列表”,JSON.stringify (this.list))
},
saveList () {
localStorage.setItem(“列表”,JSON.stringify (this.list))
}
},//生命周期函数vue页面刷新就会触发的方法
安装(){//json字符串转成json对象
var=JSON.parse列表(localStorage.getItem(“列表”))//判断列表是否存在
如果(列表){//存在则将获取到的列表保存刷新后的列表中
这一点。列表=;
}
}
})
& lt;/script>
封装操作localstorage本地存储方法
以上所述是小编给大家介绍的vue实现基于基本功能以及数据存储功能,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
