Vue之todoList升级版（全局组件）

最新推荐文章于 2022-01-23 11:37:47 发布

Quincy379

最新推荐文章于 2022-01-23 11:37:47 发布

阅读量241

点赞数

CC 4.0 BY-SA版权

分类专栏： vue-js

本文链接：https://blog.youkuaiyun.com/qq_33733970/article/details/80629169

vue-js 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一个简单的待办事项列表应用的实现过程，使用Vue.js框架完成数据双向绑定及组件化开发。该应用包含输入框用于添加待办事项，按钮用于提交待办事项至列表，并展示所有已添加的待办事项。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="inputValue">
    <button @click="handleBtnClick">提交</button>
    <ul>
        <todo-item :content="item" v-for="item in list">{{ item }}</todo-item>
    </ul>
</div>
<script>

    Vue.component('TodoItem',{
        props:['content'],
        template:"<li>{{ content }}</li>"
    })

    let app = new Vue({
        el:'#app',
        data:{
            list:[],
            inputValue:''
        },
        methods:{
            handleBtnClick() {
                this.list.push(this.inputValue);
                this.inputValue=''
            }
        }
    })
</script>

</body>
</html>