Vue实现todolist

最新推荐文章于 2024-08-04 12:12:11 发布

china-yun

最新推荐文章于 2024-08-04 12:12:11 发布

阅读量1.7w

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/Yun__shen/article/details/87561153

JavaScript 专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍使用Vue.js实现一个具备实时输入响应和列表增删功能的简易应用。通过实例代码，展示了如何利用Vue的数据绑定特性及事件监听，实现用户输入内容到列表的即时添加，以及列表项的动态删除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="val" @keyup.13="add">
    <ul>
        <li v-for="(item,index) in arr">{{item}} <button @click="del(index)">删除</button></li>
    </ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            arr:[],
            val:''
        },
        methods:{
            add(){
                this.arr.unshift(this.val);
                this.val='';
            },
            del(index){
                this.arr = this.arr.filter(function (item,i) {
                    if(i===index){
                        return false;
                    }
                    return true;
                })
            }

        }
    })

</script>
</html>