vue写一个todolist小工具

来源https://www.imooc.com/video/16984

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>Vue入门</title>
        <style type="text/css">
            .todo {
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <div id="root">
            <div>
                <!--
                    与inputValue变量双向绑定
                    点击添加按钮触发addToDo事件
                    .trim用于去除前后空格
                -->
                <input v-model.trim="inputValue" />
                <button @click="addToDo">添加</button>

            </div>
            <ul>
                <!--
                    v-for——遍历root中的list数组,获取item(value)和index(索引)
                    :key——提高循环性能
                    :content——以参数名"content”传入item的值
                    :index——以参数名“index”传入index的值
                    :delete——当触发此事件的时候执行handleDelete方法
                -->
                <todo-item v-for="(item, index) of list" :key="index" :content="item" :index="index" @delete="handleDetele">
                </todo-item>
            </ul>
        </div>
        <script type="text/javascript">
            //全局组件
            Vue.component('todo-item', {
                //接收名为content和index两个参数
                props: ['content', 'index'],
                //模板,显示todo列表的内容
                //当点击的时候触发handleClick方法
                template: '<li class="todo" @click="handleClick">{{content}}</li>',
                methods: {
                    handleClick: function() {
                        //触发delete事件,并将index参数传入delete事件中
                        this.$emit('delete', this.index);
                    }
                }
            })

            new Vue({
                //绑定id为root的组件
                el: "#root",
                data: {
                    //缓存用户输入的信息
                    inputValue: '',
                    //缓存用户当前的todo列表,一开始是空
                    list: []
                },
                methods: {
                    //addToDo事件
                    addToDo: function() {

                        if(this.inputValue.length > 0) {
                            //用户确实输入的数据的情况
                            //将list数组中添加用户刚刚输入的inputValue值
                            this.list.push(this.inputValue);
                            //并将inputValue重置,以便用户再次输入
                            this.inputValue = '';
                        }
                    },
                    //handleDelete事件
                    handleDetele: function(index) {
                        //将list数组中索引为index的位置为起点删掉一个数组元素
                        this.list.splice(index, 1);
                    }
                }
            })
        </script>
    </body>

</html>

执行效果
执行效果

阅读更多

扫码向博主提问

_Slience_

非学,无以致疑;非问,无以广识
去开通我的Chat快问
上一篇vue中v-show和v-if在显示和隐藏元素上的区别
下一篇java对微信支付HTTPS服务器证书更新进行后当前服务器是否可用验证
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭