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

本文链接：https://blog.csdn.net/m0_56426418/article/details/129735248

任务描述：

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

效果图：

代码如下：

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

觉得还不错就给个赞吧！