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

最新推荐文章于 2024-01-31 17:40:27 发布

weixin_33796205

最新推荐文章于 2024-01-31 17:40:27 发布

阅读量98

点赞数

文章标签： webpack 前端框架 javascript ViewUI

序：目前前端框架如：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>