Vue学习笔记—TodoList

  1. 一、HTML
  2. 二、JavaScript

一、HTML

<div id="app">
    <section class="hero is-medium is-primary is-bold">
        <div class="hero-body">
            <div class="container">
                <h1 class="title">
                    代办事项列表
                </h1>
                <h2 class="subtitle">
                    今天的事情今天做,今天已完成{{hasFinish}}件事,还有{{unFinish}}件事未完成。
                </h2>
            </div>
        </div>
    </section>
    <!-- 输入框 -->

    <div class="container is-widescreen" style="margin: 30px auto;">
        <div class="columns">
            <div class="column is-one-quarter">
                <input class="input" type="text" placeholder="请输入待办事项名称" v-model="inputValue"
                    @keyup.enter="addTodo()">
            </div>
            <div class="column is-one-quarter">
                <button class="button is-primary" @click="addTodo()">添加</button>
            </div>
        </div>
    </div>

    <div class="container is-widescreen">
        <nav class="panel is-success">
            <p class="panel-heading">
                已完成
            </p>
            <div class="panel-block columns is-multiline">

                <div class="column is-one-quarter" v-for="todo in hasFinishedTodo" :key="todo.id">
                    <div class="card">
                        <header class="card-header">
                            <p class="card-header-title">
                                待办事项
                            </p>
                            <a href="#" class="card-header-icon" aria-label="more options">
                                <button class="delete" @click="removeTodo(todo.id)"></button>
                            </a>
                        </header>
                        <div class="card-content">
                            <div class="content">
                                {{todo.name}}
                            </div>
                        </div>
                        <footer class="card-footer">
                            <a href="javascript:;"
                            :class="['card-footer-item',todo.hasFinished ? 'has-text-success' : 'has-text-danger']">
                                {{ todo.hasFinished ? "已完成" : "未完成"}}
                            </a>
                            <a href="javascript:;" class="card-footer-item" @click="toggleHasFinished(todo.id)">
                                切换为{{todo.hasFinished ? "未" : "已"}}完成
                            </a>
                        </footer>
                    </div>
                </div>
            </div>
        </nav>
        <nav class="panel is-danger">
            <p class="panel-heading">
                未完成
            </p>
            <div class="panel-block columns is-multiline">

                <div class="column is-one-quarter" v-for="todo in unFinishedTodo" :key="todo.id">
                    <div class="card">
                        <header class="card-header">
                            <p class="card-header-title">
                                待办事项
                            </p>
                            <a href="#" class="card-header-icon" aria-label="more options">
                                <button class="delete" @click="removeTodo(todo.id)"></button>
                            </a>
                        </header>
                        <div class="card-content">
                            <div class="content">
                                {{todo.name}}
                            </div>
                        </div>
                        <footer class="card-footer">
                            <a href="javascript:;"
                            :class="['card-footer-item',todo.hasFinished ? 'has-text-success' : 'has-text-danger']">
                                {{ todo.hasFinished ? "已完成" : "未完成"}}
                            </a>
                            <a href="javascript:;" class="card-footer-item" @click="toggleHasFinished(todo.id)">
                                切换为{{todo.hasFinished ? "未" : "已"}}完成
                            </a>
                        </footer>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</div>

二、JavaScript

<script>
    const app = new Vue({
        el: "#app",
        data: {
            inputValue: '',
            todos: [
                { id: 1, name: "吃饭", hasFinished: true },
                { id: 2, name: "睡觉", hasFinished: false },
                { id: 3, name: "看电视", hasFinished: false }
            ]
        },
        computed: {
            hasFinishedTodo() {
                return this.todos.filter(todo => {
                    return todo.hasFinished === true
                })
            },
            unFinishedTodo() {
                return this.todos.filter(todo => {
                    return todo.hasFinished === false
                })
            },
            hasFinish() {
                return this.todos.filter(todo => {
                    return todo.hasFinished === true
                }).length
            },
            unFinish() {
                return this.todos.filter(todo => {
                    return todo.hasFinished === false
                }).length
            }
        },
        methods: {
            toggleHasFinished(id) {
                this.todos = this.todos.map(todo => {
                    if (id === todo.id) todo.hasFinished = !todo.hasFinished
                    return todo
                })
            },
            removeTodo(id) {
                this.todos = this.todos.filter(todo => {
                    return todo.id !== id
                })
            },
            addTodo() {
                if (this.inputValue === '') return
                this.todos.push({
                    id: Date.now(),// 时间戳
                    name: this.inputValue,
                    hasFinished: false
                })
                this.inputValue = ""
            }
        }
    }) 
</script>

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:Vue学习笔记—TodoList

文章字数:865

本文作者:Spicy boy

发布时间:2018-08-01, 11:23:48

最后更新:2021-03-08, 17:21:38

原始链接:http://www.spicyboy.cn/2018/08/01/Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E2%80%94TodoList/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏