vue小练习TODOlist

今天做了一个vue小练习TODOlist，用了一些不同的方法，功能基本实现，但是还有一些不太完美的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #demodiv{
            margin: 100px;
        }
        li{
            list-style: none;
        }
        .active{
            color:slategray;
            background-color: #ccc;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div id="demodiv">
        <h1>任务列表</h1>
        <p>任务总数：{{arr.length}}，还有：{{this.residue()}}未完成，[<a href="#" @click="del()">完成</a>]</p>
        <ul>
            <li v-for="(item,index) in arr" :class="item.style?'active':''">
                <input type="checkbox" v-model="item.style">
                <span v-if="item.edit" v-on:click="edit(index)">{{item.content}}---{{item.style}}</span>
                <input :autofocus="item.edit?'':'autofocus'" v-else type="text" v-model="item.content" v-on:blur="edit(index)">
            </li>
        </ul>
        <input type="text" v-model="inputVal"><button :disabled=state v-on:click="add()">添加</button>
    </div>


    <script>
        new Vue({
            el:"#demodiv",
            data:{
                state:true,
                inputVal:"",
                arr:[
                    {content:"亚瑟",style:false,edit:true},
                    {content:"阿古朵",style:false,edit:true},
                    {content:"兰陵王",style:false,edit:true},
                    {content:"猪八戒",style:false,edit:true},
                    {content:"阿珂",style:false,edit:true},
                    {content:"鲁班",style:false,edit:true},
                    {content:"凯皇",style:false,edit:true},

                ]
            },
            methods:{
                add(){
                    if(this.inputVal != ""){
                        this.arr.push({content:this.inputVal,style:false,edit:true})
                        this.inputVal = "";
                    }
                },
                //剩余的
                residue(){
                    console.log(this.arr.filter(item=>item.style==false).length)
                    return this.arr.filter(item=>item.style==false).length
                },
                edit(index){
                    if(this.arr[index].style!=true){
                        this.arr[index].edit = !this.arr[index].edit;
                    }
                    
                },
                del(){
                    this.arr = this.arr.filter(item=>item.style==false)
                }
            },
            watch:{
                inputVal(newval,oldval){
                    if(this.inputVal==""){
                        this.state = true;
                    }else{
                        this.state = false;
                    }
                }
            }
        })
    </script>
</body>
</html>

 


其中仍有一点疑惑，就是每次如何点击后可以让input文本框出现后自动聚焦，使用了:autofocus="item.edit?'':'autofocus'"还是不能解决

posted @ 2020-08-19 00:49  kangyouwei  阅读(221)  评论(0)    收藏  举报