vue.js幾行實現的簡單的todo list

時間 2019-11-29

標籤 vue.js vue 實現簡單 todo list 欄目 JavaScript 简体版

原文原文鏈接

序：目前前端框架如：vue、react、angular，構建工具fis三、gulp、webpack等等......javascript

可謂是五花八門，層出不窮，眼花繚亂。。。其實吧只要你想玩仍是能夠玩玩的..下面是看了2天vuejs的官方文檔實現了一個簡單的todo list.感受確實方便~！~html

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

<!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;
                },
                //三、輸入後按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追加一個選項java

本文轉載自：http://www.cnblogs.com/-walker/p/6230651.htmlreact

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。