一个简单的备忘录

前言：
只在前端页面实现了增删的备忘录

      <div id="app">
        <h2>备忘录</h2>
        <!-- @submit.prevent：绑定表单提交，阻止表单提交跳转 -->
        <form action="#" @submit.prevent='addMemo'>
        <textarea placeholder="请输入今天的内容!" v-model = 'msg'></textarea>
            <button type="submit" value="完成">完成</button>
        </form>
        <ul>
            <li v-for='item in list'>
                <span>{{item.id}}</span>
                <span>{{item.msg}}</span>
                <span>{{item.time}}</span>
                <!-- #代表不跳转   通过id删除 -->
                <a href="#" @click.prevent='delMemo(item.id)'>删除</a>
            </li>
        </ul>
    </div>

//注意在上面引入外部vue.js和vuex.main.js
<script>
        window.onload=function(){
            new Vue({
                el:"#app",
                data:{
                    msg:'',
                    index:1,
                    list:[]
                },
                methods:{
                    addMemo(){
                        var memo={
                            id:this.index,
                            msg:this.msg,
                            time:new Date().toLocaleString()
                        }
                        this.list.push(memo);
                        //清空输入框
                        this.msg='';
                        //id递增
                        this.index++;
                    },
                    delMemo(id){
                        // filter过滤
                        this.list = this.list.filter((item)=>{
                            // 假设删除id为1的记录，则过滤出id不等于1的
                            return item.id!=id
                        });
                    }
                }
            });
        }
    </script>
  
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008193922154.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NDQ2MzQx,size_16,color_FFFFFF,t_70#pic_center)