dtcms模板 进程 typora https 工厂模式 symfony memory merge webforms msbuild underscorejs Egret Engine LimeJS vue状态管理 vue源码下载 vue特点 php抽奖源码 jquery去空格 jquery绑定change事件 matlab定义空矩阵 pip环境变量 matlab中不等于怎么表示 js控制台打印 python3文件操作 python返回值 java案例 java的继承 怎么配置java环境 java定义变量 java结束线程 java文件复制 tar文件怎么打开 r语言和python ps校正倾斜照片 lseek函数 音乐剪辑器下载 blued是什么软件 虚拟打印机安装 安卓刷机精灵 js刷新页面
当前位置: 首页 > 学习教程  > 编程语言

一个简单的备忘录

2020/10/8 19:43:43 文章标签:

前言&#xff1a; 只在前端页面实现了增删的备忘录 <div id"app"><h2>备忘录</h2><!-- submit.prevent&#xff1a;绑定表单提交&#xff0c;阻止表单提交跳转 --><form action"#" submit.preventaddMemo><textarea plac…

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

      <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)



本文链接: http://www.dtmao.cc/news_show_250161.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?