数据分析之vue(实现一个简单的备忘录页面)

岁月y

已于 2022-03-03 09:52:31 修改

阅读量993

点赞数 1

文章标签：数据分析 vue vue.js

于 2022-03-03 09:40:15 首次发布

本文链接：https://blog.csdn.net/weixin_66448906/article/details/123245783

版权

本文介绍了如何在WebStorm中使用Vue.js创建一个简单的备忘录页面。通过新建必要的文件和编写APP.vue及storage.js的代码，实现了备忘录功能。最后展示了实现效果。

摘要由CSDN通过智能技术生成

首先在WebStorm里面创建一个vue.js包
在这里插入图片描述
新建好所需要的文件夹与js文件

接下来就是代码部分：
APP.vue:

<template>
    <div id="app">
        <h1>备忘录</h1>
    </div>
    <div>
        <input type="text" v-model="todo" @keydown="doAdd($event)"/>
        <br>
        <hr>
        <br>
        <h2>今日未完成的目标</h2>
        <ul>
            <li v-for="i in undolist" :key="i">
                <input type="checkbox" v-model="i.checked">{
  {i.title}} -----
                <button @click="removeData(i)">删除</button>