腾讯十天Vue.js课程之三：增删便签任务

来源：互联网发布：东方有线网络客服电话编辑：程序博客网时间：2024/05/02 00:32

v-if与v-show的区别:

v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

——来自Vue.js官网

app.js

/** * Created by sotto on 2017-4-17. */var list = [    {        title: "吃饭睡觉打豆豆1",        isChecked: false    },    {        title: "吃饭睡觉打豆豆1",        isChecked: true    },];new Vue({    el: ".main",    data: {        list: list,        todo: ""    },    methods: {        addTodo(data,event) {            //添加任务            //向list中添加一项任务            /*                {                    title:                }             */            console.log(event);            //事件处理函数中的this指向的是当前的根实例            // if(event.keyCode === 13){                this.list.push({                    title: this.todo,                    isChecked: false                });            // }            this.todo="";        },        deleteTodo(todo){            var index = this.list.indexOf(todo);            this.list.splice(index,1);        },        editorTodo(todo){//编辑任务        }    }});

todos.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>todos</title>    <link rel="stylesheet" href="">    <style>        *{            padding:0;            margin:0;        }        .page-top{            position: fixed;            top:0;            left:0;            height: 40px;            background-color: #E8593D;            width:100%;            text-align: center;        }        .page-content{            color: #FFFFFF;            width: 70%;            margin-left: 15%;            line-height: 40px;            text-align: left;        }        .main{            margin-top: 40px;            margin-left: 15%;            width: 70%;            padding: 5px;        }        .main .task-input{            height:40px;            width:100%;            font-size: 20px;        }        .main ul li{            /*list-style-position: inside;*/            list-style-type: none;        }        .completed{            text-decoration:line-through;        }    </style>    <script src="../js/vue.js"></script></head><body>    <div class="page-top">        <div class="page-content">            <h2>任务计划列表</h2>        </div>    </div>    <div class="main">        <h3 class="big-title">添加任务：</h3>        <input type="text" class="task-input" placeholder="例如：吃饭睡觉打豆豆； 提示：+回车即可添加任务" v-on:keyup.enter="addTodo(123,$event)" v-model="todo">        <ul class="task-count">            <li v-show="list.length">{{list.length}}个任务未完成</li>            <li class="action">                <a class="active" href="#">所有任务</a>                <a href="#">未完成的任务</a>                <a href="#">完成的任务</a>            </li>        </ul>        <h3 class="big-title">任务列表：</h3>        <div class="tasks">            <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>            <ul class="todo-list">                <li class="todo" :class="{completed:item.isChecked}" v-for="item in list">                    <div class="view">                        <input class="toggle" type="checkbox" v-model="item.isChecked">                        <label @dblclick="editorTodo(item)">{{item.title}}</label>                        <button class="destroy" v-on:click="deleteTodo(item)">x</button>                    </div>                    <input class="edit" type="text">                </li>            </ul>        </div>    </div>    <script src="js/app.js"></script></body></html>

0 0