vue学习（二）做一个简单的toDoList

最新推荐文章于 2024-06-02 22:12:52 发布

dream21st

最新推荐文章于 2024-06-02 22:12:52 发布

阅读量239

点赞数

分类专栏： vue学习文章标签： vue学习

本文链接：https://blog.csdn.net/qq_36305027/article/details/83687733

版权

vue学习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一，最直接的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To do List</title>
    <script src="vue.js"></script>
</head>
<body>

    <div id="app">
        <input v-model="content"></input>
        <button @click="add">添加</button>
        <ul>
            <li v-for="(item,index) in toDoList" @click="deleteButton(index)">
               {{index}} ---- {{item}}  <button @click="deleteButton(index)">删除</button>
            </li>
        </ul>
    </div>

<script>
    var app=new Vue({
        el:"#app",
        data:{
            content:'',
            toDoList:['apple','pear','orange']
        },
        methods:{
            add:function () {
                this.toDoList.push(this.content);
                this.content='';
            },
            deleteButton:function (index) {
                this.toDoList.splice(index,1);
            }
        }
    })
</script>
</body>
</html>

二，组件化代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To do List</title>
    <script src="vue.js"></script>
</head>
<body>

    <div id="app">
        <input v-model="content"></input>
        <button @click="add">添加</button>
        <ul>
            <todo-item :item="item" :index="index" v-for="(item,index) in toDoList" @deletebutton="deletebutton"></todo-item>
        </ul>
    </div>

<script>

    var todoItem={
        props:['item','index'],
        template:"<li>{{index}}-----{{item}}----<button @click='handleDelete'>删除</button></li>",
        methods:{
            handleDelete:function () {
                this.$emit('deletebutton',this.index)
            }
        }
    }

    var app=new Vue({
        el:"#app",
        data:{
            content:'',
            toDoList:['apple','pear','orange']
        },
        components:{
            todoItem:todoItem
        },
        methods:{
            add:function () {
                this.toDoList.push(this.content);
                this.content='';
            },
            deletebutton:function (index) {
                this.toDoList.splice(index,1);
            }
        }
    })
</script>
</body>
</html>

dream21st

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue学习（二）做一个简单的toDoList

一，最直接的代码 &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;To do List&lt;/title&gt; &lt;script src="vue.js&quot
复制链接

扫一扫