vue.js - todolist

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My todo list</title>
    <style>
        *{
            list-style: none;
            outline: none;
            border: none;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .app h1,.app p{
            text-align: center;
            margin-top: 10px;
        }
        #app{
            font-family: 'Avenir', Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: #2C3E7A;
        }
        .app{
            width: 640px;
            margin: 0 auto;
            background: #c5c5c5;
            padding:30px 10px;
            border: 1px solid #2C3E7A;
            margin-top: 10px;
            position: relative;
            box-shadow: 0 0 10px #2C3E7A;
        }
        .app:before{
            content: '';
            width: 2px;
            border-left: 1px dashed #2C3E7A;
            border-right: 1px dashed #2C3E7A;
            height: 100%;
            position: absolute;
            top: 0;
            left: 51px;
        }
        .app li{
            cursor: pointer;
            height: 45px;
            line-height: 45px;
            padding-left: 65px;
            position: relative;
            border-bottom: 1px dashed #2C3E7A;
        }
        .todo-box li input{
            text-align: center;
            width: 40px;
            height: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            margin:0 auto;
            border: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            -o-appearance: none;
            appearance: none;
        }
        .todo-box li input:after{
            content: '✔';
            line-height: 43px;
            font-size: 20px;
            color: #f0f0f0;
            text-shadow: 0 -1px 0 #bfbfbf;
        }
        .app li.finished{
            text-decoration: line-through;
            color: #4fc08d;
        }
        .app li.finished input:after{
            color: #4fc08d;
            text-shadow: 0 1px 0 #669991;
            bottom: 1px;
            position: relative;
        }
        .typeInput input{
            width: 81%;
            color: #2C3E7A;
            font-size: 24px;
            border: 1px solid #2C3E7A;
            padding: 1%;
            transition: all 0.3s ease-in-out;
        }
        .typeInput input:focus {
            outline: none;
            border-color: #2C3E7A;
            box-shadow: 0 0 10px #2C3E7A;
        }
    </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 class="todo-box">
        <li v-for='item in items' v-bind:class='{finished:item.isFinished}'>
            <input type="checkbox"  v-on:click='toggleFinish(item)'>
            {{item.text}}
        </li>
    </ul>
</div>
<script type="text/javascript" src="http://cn.vuejs.org/js/vue.js"></script>
<script type="text/javascript">
const STORAGE_KEY = 'todos-vuejs';
const Store =  {
    fetch() {
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY)||'[]');
    },
    save( items ) {
        window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items));
    }
};

const app = new Vue({
    el: '#app',
    data: {
        title: 'My todo list',
        // items:[
        //     // {
        //     //     text:'Learn CSS',
        //     //     isFinished:true
        //     // },
        //     // {
        //     //     text:'Learn javascript',
        //     //     isFinished:false
        //     // }
        // ],
        items: Store.fetch(),
        newText: ''
    },

    //watch深度监听函数，监听的是items的变化
    //只要有新的输入内容就会触发，
    watch: {
        items: {
            //val和oldval这里都是对象
            handler(items) {
                // console.log(items);
                Store.save( items );
            },
            deep:true
        }
    },
    //
    methods:{
        toggleFinish(item) {
            // console.log(item.isFinished);
            item.isFinished=!item.isFinished;
        },
        //3、输入后按enter键盘的事件
        addNewlist() {
            let _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>

最后编辑于：2017.12.05 06:13:42

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,132评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,802评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,566评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,858评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,867评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,695评论 1赞 282
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,064评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,705评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,915评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,677评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,796评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,432评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,041评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,992评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,223评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,185评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,535评论 2赞 343

vue.js - todolist

推荐阅读更多精彩内容