13.代办清单-新增

今天来练习一个小小的代办清单:

新增功能:
1.生成列表结构 v-for
2.获取用户输入 (v-model 双向数据绑定)
3.enter，新增数据 (v-on .enter 添加内容)

<div id="todo-list">        <p>待办事项清单</p>        <input type="text" placeholder="请输入事项" v-model="message.title" @keyup.enter="add"><!--绑定输入框的值到message.title，并在按下Enter时触发add函数以新增待办事项-->        <section>            <ul class="todo">                <li v-for="(item, index) in lists" :key="index"><!-- 给每个被迭代的元素分配一个唯一的识别键 -->                    <label>                        <input type="checkbox" v-model="item.todo">                        {{ index + 1 }} / {{ item.title }}                     </label>                </li>            </ul>        </section>    </div>    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script> var app = new Vue({        el: "#todo-list",        data: {            lists: [                { title: "念日文", todo: false },                { title: "看小说", todo: false },                { title: "画画", todo: false }            ],            message: {                title: "",  //代办项目                todo: false  //未完成            },        },        methods: {            add() {                if (this.message.title.trim() === "") return; // 不添加空项目(.trim 过滤输入的首尾空白字符)                // 複製 message 对象以避免重複添加引用                var newItem = {                    title: this.message.title,                    todo: false                 };                this.lists.push(newItem); //新增新项目到清单里                this.message.title = ''; // 清空输入框            } } });    </script>

参考资料:
https://www.bilibili.com/video/BV1HE411e7vY/?p=19&share_source=copy_web&vd_source=85a8c5bb37dc77d30860d2b3537de967