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深度監(jiān)聽函數(shù)，監(jiān)聽的是items的變化
    //只要有新的輸入內(nèi)容就會觸發(fā)耿导，
    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 如果不為空就將剛剛輸入的內(nèi)容以對象的形式产场，追加到items數(shù)組對象內(nèi)部隔节，
            //默認新追加的是沒完成的為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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末值纱，一起剝皮案震驚了整個濱河市彪薛，隨后出現(xiàn)的幾起案子茂装，更是在濱河造成了極大的恐慌，老刑警劉巖善延，帶你破解...
沈念sama閱讀 217,185評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件少态，死亡現(xiàn)場離奇詭異，居然都是意外死亡易遣，警方通過查閱死者的電腦和手機彼妻，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,652評論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來豆茫，“玉大人侨歉，你說我怎么就攤上這事】辏” “怎么了为肮？”我有些...
開封第一講書人閱讀 163,524評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長肤京。經(jīng)常有香客問我颊艳，道長茅特，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,339評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任棋枕，我火速辦了婚禮白修，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘重斑。我一直安慰自己兵睛，他們只是感情好，可當我...
茶點故事閱讀 67,387評論 6贊 391
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布窥浪。她就那樣靜靜地躺著祖很，像睡著了一般。火紅的嫁衣襯著肌膚如雪漾脂。梳的紋絲不亂的頭發(fā)上假颇，一...
開封第一講書人閱讀 51,287評論 1贊 301
城市分裂傳說
那天，我揣著相機與錄音骨稿，去河邊找鬼笨鸡。笑死，一個胖子當著我的面吹牛坦冠，可吹牛的內(nèi)容都是我干的形耗。我是一名探鬼主播，決...
沈念sama閱讀 40,130評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼辙浑，長吁一口氣：“原來是場噩夢啊……” “哼激涤！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起判呕，我...
開封第一講書人閱讀 38,985評論 0贊 275
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤昔期，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后佛玄，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,420評論 1贊 313
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡累澡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,617評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年梦抢，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片愧哟。...
茶點故事閱讀 39,779評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡奥吩，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出蕊梧，到底是詐尸還是另有隱情霞赫，我是刑警寧澤，帶...
沈念sama閱讀 35,477評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布肥矢，位于F島的核電站端衰，受9級特大地震影響叠洗，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜旅东，卻給世界環(huán)境...
茶點故事閱讀 41,088評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一灭抑、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧抵代，春花似錦腾节、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,716評論 0贊 22
一樁弒父案案腺，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至康吵，卻和暖如春劈榨，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背涎才。一陣腳步聲響...
開封第一講書人閱讀 32,857評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工鞋既，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人耍铜。一個月前我還...
沈念sama閱讀 47,876評論 2贊 370
代替公主和親
正文我出身青樓邑闺，卻偏偏與公主長得像，于是被迫代替她去往敵國和親棕兼。傳聞我的和親對象是個殘疾皇子陡舅，可洞房花燭夜當晚...
茶點故事閱讀 44,700評論 2贊 354

vue.js - todolist

推薦閱讀更多精彩內(nèi)容