我自己寫todolist的時(shí)候,做已完成和未完成篩選的時(shí)候，發(fā)現(xiàn)用計(jì)算屬性只能執(zhí)行一次，再就動(dòng)不了了。
下面的代碼是把filterlists放到方法里面，就可以用了，但是放到計(jì)算里面就只執(zhí)行一次。
計(jì)算屬性不是依賴有更新，自己就會(huì)更新嗎。

<template>
    <div class="demo">
        <h1>vue-todolist</h1>
        <p id="newlist">
            <input v-model="newtodo" v-on:keyup.enter="addlist" type="text">
            <time>{{uptime}}</time>
        </p>
        <ul class="mylist">
            <h3 style="margin:0">mylist-todo</h3>
            <li v-for="item in filterlists()">
                <input type="checkbox"  v-model="item.ischeck">
                <span v-bind:class="{completed:item.ischeck}">{{item.text}}</span>
                <span @click="dellist(item)" class="del">&times;</span>
                <span class="addtime">{{item.addtime}}</span>
            </li>
        </ul>
        <div class="control">
            <button @click="mycom">已完成</button>
            <button @click="mynot">未完成</button>
            <button @click="myall">全部</button>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                newtodo:'',
                lists:[],
                compoleted:false,
                notyet:false
            }
        },
        props:{
            uptime:{
                type:String
            }
        },
        methods:{
            addlist(){
                if(this.newtodo){
                    this.lists.push({
                        text:this.newtodo.trim(),
                        ischeck:false,
                        addtime:this.uptime
                    });
                    this.newtodo='';
                }
            },
            dellist(thisdata){
                this.lists.splice(this.lists.indexOf(thisdata),1);
            },
            myall(){
                this.completed=false;
                this.notyet=false;
            },
            mycom(){
                this.completed=true;
                this.notyet=false;
            },
            mynot(){
                this.completed=false;
                this.notyet=true;
            },
            filterlists:function(){
                if(this.completed){
                    return this.lists.filter(function(todo){
                        return todo.ischeck
                    })
                }else if(this.notyet){
                    return this.lists.filter(function(todo){
                        return !todo.ischeck
                    })
                }else{
                    return this.lists;
                }
            }
        },
        computed:{

        }
        
    }
</script>

這是頁面效果