添加了删除功能，请老师检查

来源：1-4 组件概念初探，对 TodoList 进行组件代码拆分

慕斯2168053

2021-12-05 12:25:22

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist</title>
    <!-- 引入Vue -->
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="box"></div>
    <script>
        // 创建Vue实例，将内容添加到#box的盒子中
        Vue.createApp({
            data() {
                return {
                    // list: ['hello', 'world', 'dell', 'lee']
                    value: '',
                    list: []
                }
            },
            methods: {
                fun() {
                    // console.log(this.value);
                    this.list.push(this.value);
                    this.value = '';
                },
                fn() {
                    // 删除首个元素
                    this.list.shift();
                    // 删除末尾元素
                    // this.list.pop();
                }
            },
            // v-for 循环遍历数据list,将遍历后的每一个元素放在item中
            // v-model 将输入在input里面的内容与data中的内容进行双向绑定，添加到方法中
            template: `
                <div>
                    <input v-model = "value"/>
                    <button v-on:click = "fun">增加</button>
                    <button v-on:click = "fn">删除</button>
                    <ul>
                        <li v-for = "item of list">{{item}} </li>
                    </ul>
                </div>`

        }).mount('#box');
    </script>
</body>

</html>

写回答

1回答