vue.js几行实现的简单的todo list

Posted 2020-08-25 代码恶童

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue.js几行实现的简单的todo list相关的知识，希望对你有一定的参考价值。

序：目前前端框架如：vue、react、angular，构建工具fis3、gulp、webpack等等......

可谓是五花八门，层出不穷，眼花缭乱。。。其实吧只要你想玩还是可以玩玩的..下面是看了2天vuejs的官方文档实现了一个简单的todo list.感觉确实方便~！~

vuejs官方:http://cn.vuejs.org/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist-vue</title>
    <script src="src/vue.js"></script>
    <style>
        *{
            list-style: none;
            outline: none;
            border: none;
        }
        #app{
            font-family: \'Avenir\', Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
        }
        .app{
            width: 90%;
            margin: 0 auto;
            background: #c5c5c5;
            padding: 5%;
            border: 1px solid #000;
            margin-top: 10px;
        }
        .app li.finished{
            text-decoration: line-through;
        }
        .typeInput input{
            width: 70%;
            font-size: 24px;
            border: 1px solid #000;
            padding-left:5px;
        }
    </style>
</head>
<body>
    <div id="app" class="app">
        <h1 v-text=\'title\'></h1>
        <p class=\'typeInput\'>
            <input type="text" v-model=\'newText\' v-on:keyup.enter=\'addNewlist\'>
        </p>
        <ul>
            <li v-for=\'item in items\' v-bind:class=\'{finished:item.isFinished}\' v-on:click=\'toggleFinish(item)\'>{{item.text}}</li>
        </ul>
    </div>
    <script>
        var app=new Vue({
            el:\'#app\',
            data:{
                title:\'My todo list\',
                items:[
                    {
                        text:\'Learn CSS\',
                        isFinished:true
                    },
                    {
                        text:\'Learn javascript\',
                        isFinished:false
                    }
                ],
                newText:\'\'
            },
            methods:{
                toggleFinish:function(item){
                    // console.log(item.isFinished);
                    item.isFinished=!item.isFinished;
                },
                //3、输入后按enter键盘的事件
                addNewlist:function(){
                    var _self=this;
                    //3.1 如果不为空就将刚刚输入的内容以对象的形式，追加到items数组对象内部，
                    //默认新追加的是没完成的为false
                    if(_self.newText){
                        _self.items.push({
                            text:_self.newText,
                            isFinished:false
                        });
                    }
                    // console.log(_self.newText);
                    // console.log(this);
                    //3.2 同时清空input输入框
                    _self.newText=\'\';
                }
            }
        });
    </script>
</body>
</html>

目前只能输入按entry追加一个选项

本文转载自：http://www.cnblogs.com/-walker/p/6230651.html

以上是关于vue.js几行实现的简单的todo list的主要内容，如果未能解决你的问题，请参考以下文章

ASP.NET Core Blazor WebAssembly实现一个简单的TODO List

Vue.js 将子组件导入组件

Vue双向绑定的关键：Object.defineProperty()

简单 vue todo list 封装JavaScript 的storage 在localStorage

小技巧|使用Vue.js的Mixins复用你的代码