当前位置：首页 > news >正文

【Vue3入门2】02-记事本案例

news 来源：原创 2025/5/1 12:21:53

本文主要介绍记事本案例，具体实现记事本的显示、添加、删除、清空功能。

运用到了前面所介绍的各种vue操作

<body>
    <div id="app">
        <!-- 文本框使用双向绑定，当文本框内容更新，data.content也随之更新 -->
        <input type="text" v-model="data.content">

        <!-- 1.定义button按钮，并为其添加add方法 转2写add方法 -->
        <button @click="add">添加</button>

        <!-- 5.将修改后的list显示到页面上 -->
        <ul>
            <!-- 6.为li添加v-for循环li -->
            <!-- 当点击添加时 就把添加到数组的内容同样显示在页面上 -->
            <li v-for="(value,index) in data.list">
                {{ value }}
                <!-- 7.接下来实现删除效果，在每个li旁边显示删除按钮，删除需要唯一的标识index -->
                <button @click="del(index)">删除</button>
            </li>
        </ul>

        <!-- 11.获取记事本中记录的数量 -->
        {{ data.list.length }}

        <!-- 12.最后设置清空记事本的功能,转到13编写clear方法 -->
        <button @click="clear">清空</button>
    </div>
    <script type="module">
        // 模块化开发
        import { createApp, reactive } from './vue.esm-browser.js'
        createApp({
            setup() {  // reactive创建响应式数据
                const data = reactive({
                    content: "www.baidu.com",  // 内容
                    list: ["zzz", "baidu.com"],  // 列表
                })
                // 2.add方法 将文本框的内容添加到list数组内
                const add = () => {
                    // 3.将文本框内容push到数组内
                    data.list.push(data.content)
                    console.log(data.list);
                }
                // 8.del方法 将文本框的内容添加到list数组内
                const del = (index) => {
                    // 9.splice(删除的起始索引,删除的数量)
                    data.list.splice(index,1)
                    console.log(data.list)
                }
                // 13.clear方法
                const clear = () => {
                    // 14.只需要将list设置为空数组
                    data.list = []
                }
                return {
                    data,
                    // 4.返回add方法
                    add,
                    // 10.返回del
                    del,
                    // 15.返回clear
                    clear
                }
            }
        }).mount("#app")
    </script>
</body>