Vue学习之ToDoList功能

最新推荐文章于 2024-05-28 16:01:07 发布

「已注销」

最新推荐文章于 2024-05-28 16:01:07 发布

阅读量177

点赞数

分类专栏： vue 文章标签： vue vueToDoList功能 vue点击删除 vue基础

本文链接：https://blog.csdn.net/gwz1196281550/article/details/102609722

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ToDoList</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue">
        <button @click="handleBtnClick">提交</button>
        <ul>
            <todo-item :content="item"
                       :index="index"
                       v-for="(item, index) in list"
                       @delete="handleItemDelete">
            </todo-item>
        </ul>
    </div>
    <script>

        var TodoItem = {
            props: ['content', 'index'],
            template: "<li @click='handleItemClick'>{{content}}</li>",
            methods: {
                handleItemClick: function () {
                    this.$emit("delete", this.index)
                }
            }
        };
        var app = new Vue({
            el: '#app',
            components: {
              TodoItem: TodoItem,
            },
            data: {
                list: [],
                inputValue: '',
            },
            methods: {
                handleBtnClick: function () {
                    this.list.push(this.inputValue);
                    this.inputValue = '';
                },
                handleItemDelete: function (index) {
                    this.list.splice(index, 1)
                }
            }
        })
    </script>
</body>
</html>