vue todo-mvc

最新推荐文章于 2024-03-14 11:52:17 发布

花村大地主

最新推荐文章于 2024-03-14 11:52:17 发布

阅读量810

点赞数

分类专栏： vue-js 文章标签： vue-todo

本文链接：https://blog.csdn.net/jayhkw/article/details/75304192

版权

vue-js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

作为vue在路上，虽然已经接触很久了，尼玛打包工具都用起了，还是又了次todo demo
感觉很多的js框架，都喜欢搞个todo mvc出来，比比谁的代码短。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todo MVC</title>
    <script src="../vue.js"></script>
    <style>
        body{
            background: #eee;
        }
        #app{margin: 0 auto;width: 700px;}
        #app h1{font-size: 40px;color: #ffa600;text-align: center}
        #app input{width: 100%;height: 55px;border: 1px solid #ccc;box-sizing: border-box;padding: 0 15px;line-height: 55px;font-size: 20px;color: #999}
        [v-cloak] { display: none; }

        ul,li{list-style: none;margin: 0; padding: 0}
        li{line-height: 50px;border-bottom: 1px solid #ddd;background: #fff;padding: 0 1rem;position: relative}
        li span{display: inline-block;width: 70%}
        li.isedit input{display: block}
        li input{display: none}
        #app li input {position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 1px solid blue}
        .close{position: absolute;right: 1.5rem;top: 0}
        .empty{text-align: center;font-size: 30px;color: #aaa}
    </style>
</head>
<body>

<div id="app">
    <h1>TODO MVC</h1>
    <input type="text" value="" name="input" placeholder="需要添加点什么?" v-model="input" @keyup.enter="add" />

    <section>
        <ul v-cloak v-if="list">
            <li v-for="it of list"
                :class="{isedit:it.isEdit}"
            >
                <span :id="it.id" @click="edit(it)">{{it.name}}</span>
                <a href="javascript:;" class="close" @click="close(it)">close</a>
                <input type="text"
                       v-model="it.name"
                       v-to-focus="it.isEdit"
                       @blur="editsuccess(it)"
                       @keyup.enter="editsuccess(it)"
                       @keyup.esc="editsuccess(it)"
                />
            </li>
        </ul>
        <div class="empty" v-if=" list == '' ">空空的~~</div>
    </section>
</div>


<script>
    var app = new Vue({
        data : {
            input: "",
            editItem : null,
            list : [
                {
                    id : 1,
                    name: "颉要城呆地厅需要",
                    isEdit: false
                },
                {
                    id : 2,
                    name: "哈士奇不老大哥城要",
                    isEdit:false
                }
            ]
        },
        methods : {
            add : function () {
                var text = this.input && this.input.trim();
                if(!text) return;
                this.list.push({
                    name : text,
                    id : text,
                    isEdit:false
                });
                this.input = "";
            },
            close : function (it) {
                this.list.splice(this.list.indexOf(it),1);
            },
            edit : function (it) {
                it.isEdit = true;
            },
            editsuccess: function (it) {
                if(it.name.trim() ==""){
                    this.close(it);
                }
                it.isEdit = false;
            },
        },
        directives : {
            "to-focus" : function (el,binding) {
                if(binding.value){
                    el.focus();
                }
            }
        }
    });

    app.$mount('#app')
</script>
</body>
</html>

花村大地主

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue todo-mvc

作为vue在路上，虽然已经接触很久了，尼玛打包工具都用起了，还是又了次todo demo 感觉很多的js框架，都喜欢搞个todo mvc出来，比比谁的代码短。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Todo MVC</title> <script src="../vue.js
复制链接

扫一扫