一.案例知识点
1.splice移除和fieldset标签
splice(index,num) 从哪个索引开始,移除几个值
fieldset是一种框架标签,如下图所示,legend必须写在fieldset中
<fieldset>
<legend>用户代办事项</legend>
</fieldset>
2.案例缓存数据
案例主要是代码的模块化封装,当前案例写数据缓存
每次载入的数据一刷新就没有了,这个时候需要缓存数据
Storage模块化组件
js文件,最后要用export default将文件暴露出去
JSON.parse()【从一个字符串中解析出json对象】
eg:定义一个字符串
var data=’{“name”:“goatling”}’
解析对象 JSON.parse(data)
结果是:name:“goatling”
JSON.stringify()【从一个对象中解析出字符串】
var data={name:‘goatling’}
JSON.stringify(data)
结果是:’{“name”:“goatling”}’
<template>
<div id="app">
<div class="title">
<div class="title_left">
ToDOList
</div>
<div class="user_input">
<input
type="text"
placeholder="请输入..."
@keydown.enter="user_valele"
v-model="val"
>
<button @click="user_valele">添加</button>
</div>
</div>
<div class="ing">
<fieldset>
<legend>用户代办事项</legend>
<ul class="menu">
<p>未完成事项:</p>
<li
v-for="(item,index) in listele"
:key="index"
v-if="!item.isfinish"
>
<input
type="checkbox"
:checked="item.isfinish"
@click="user_finish(index)"
/>
<!--: 是v-bind的简写-->
<span>{
{
item.name}}</span>
<button @click="user_delete(index)">删除</button>
</li>
<p>已完成事项:</p>
<