Vue.js实现一个超级简单的待办事项（备忘录）功能

比眉伴天荒 2023-09-25 18:48 38阅读 0赞

**目录**

任务描述：

效果图：

代码如下：

--------------------

## 任务描述： ##

> 完成待办事项记录，在输入框中输入待办事项，点击“添加”按钮，进入未完成项列表中，同时数量+1；点击未完成项中的“删除”按钮，待办事项进入已完成列表，未完成项的数量-1，已完成项的数量+1。

## 效果图： ##

![5355c31295d14401b1686d5bd5d2fc34.jpeg][]

## 代码如下： ##

<body>
        <h3>最近完成的计划</h3>
        <div id="memorandum">
            <input type="text" v-model="text">
            <button @click="add">添加</button>
            <br>
            未完成{
       {item.length}}项
            <br>
            <ul v-show="item.length">
                <li v-for="(items, index) in item">
                    {
       {items}}
                    <button @click="del(index)">删除</button>
                </li>
            </ul>
            已完成{
       {doitem.length}}项
            <br>
            <ul>
                <li v-for="(doitems, index) in doitem">
                    {
       {doitems}}
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#memorandum',
                data: {
                    item: [],
                    doitem: [],
                    text: '',
                },
                methods: {
                    add: function () {
                        this.item.push(this.text);
                        this.text = "";
                    },
                    del: function (index) {
                        this.doitem.push(this.item[index]);
                        this.item.splice(index, 1);
                    }
                }
            })
        </script>
    </body>

**觉得还不错就给个赞吧！**

[5355c31295d14401b1686d5bd5d2fc34.jpeg]: https://img-blog.csdnimg.cn/5355c31295d14401b1686d5bd5d2fc34.jpeg