todomvc 组件编写逻辑

第一步创建data数据

 

data:{

            name:'',

            list:[

                // {id:1,name:'小红',completed:false},

                // {id:2,name:'小蓝',completed:true},

                // {id:3,name:'小紫',completed:false},

            ]

},

 

第二步，循环数据输出到模板

 

<li :class="{completed:item.completed}" v-for='item in list' >              //动态的绑定classcompleted:item.completed完成划线效果

                        <div class="view">

                            <input class="toggle" type="checkbox" checked>

                            <label>{{item.name}}</label>

                            <button class="destroy"></button>

                        </div>

                        <input class="edit" value="Create a TodoMVC template">

 </li>

 

第三步，checkbox和划线联动,当checkbox为true时item.completed的值也为true

 

<li :class="{completed:item.completed}" v-for='item in list' >          

                        <div class="view">

                            <input class="toggle" type="checkbox" v-model='item.completed'>

                            <label>{{item.name}}</label>

                            <button class="destroy"></button>

                        </div>

                        <input class="edit" value="Create a TodoMVC template">

 </li>

第四步，添加数据功能

 

<header class="header">

                <h1>todos</h1>

                <input class="new-todo" placeholder="What needs to be done?" autofocus @keyup.enter='add' v-model='name'>   // 使用键盘事件调用事件函数，使用双向数据绑定绑定name

</header>

 

methods:{

            add(){　

 

if(this.name.trim() === ''){                                                                //使用this.name.trim()方法防止输入空格

                    return

                }

　                                                                                                //使用push方法添加数据对象，this.name='' 用来清除事件处理完成后的文字

                 this.list.push({id:4,name:this.name,completed:false}),  

                this.name=''

            }

        },

 

 第五步，删除功能

<li :class="{completed:item.completed}" v-for=' (item,index) in list' >           //使用item索引

                        <div class="view">

                            <input class="toggle" type="checkbox" v-model='item.completed'>

                            <label>{{item.name}}</label>

                            <button class="destroy" @click='remove'></button>

                        </div>

                        <input class="edit" value="Create a TodoMVC template">

</li>

 

remove(index){                                        //删除

                this.list.splice(index,1)

 }

 

第六步，隐藏页脚

 

  <footer class="footer" v-show='showFooter'>        //使用v-show  建立显示隐藏

                <!-- This should be `0 items left` by default -->

                <span class="todo-count"><strong>0</strong> item left</span>

                <!-- Remove this if you don't implement routing -->

                <ul class="filters">

                    <li>

                        <a class="selected" href="#/">All</a>

                    </li>

                    <li>

                        <a href="#/active">Active</a>

                    </li>

                    <li>

                        <a href="#/completed">Completed</a>

                    </li>

                </ul>

                <!-- Hidden if no completed items are left ↓ -->

                <button class="clear-completed">Clear completed</button>

</footer>

                                         //检测数组中的元素数量，如果大于0返回true

computed:{

            showFooter(){

                return this.list.length > 0     

            }

        }

 

第七步，双击进入编辑

 

<li :class="{completed:item.completed, editing:item.id === editid}" v-for='(item,index) in list' >       // 通过editing的值 ture和flase来决定是否进入编辑状态，判断当前id时否等于data中的id

                        <div class="view">

                            <input class="toggle" type="checkbox" v-model='item.completed'>

                             <label @dblclick='showEdit(item.id)'>{{item.name}}</label>                        //通过双击事件，传递当前id

                            <button class="destroy" @click='remove'></button>

                        </div>

                        <input class="edit" v-model='item.name'>

 </li>

 

 

 

showEdit(id){

                this.editid = id            将当前id赋值给id：-1  的数据，覆盖掉原来的data id  

            }

 

第八步，回车关闭编辑

 

<li :class="{completed:item.completed,editing:item.id === editid}" v-for='(item,index) in list' >

                        <div class="view">

                            <input class="toggle" type="checkbox" v-model='item.completed'>

                            <label @dblclick='showEdit(item.id)'>{{item.name}}</label>

                            <button class="destroy" @click='remove'></button>

                        </div>

                         <input class="edit" v-model='item.name' @keyup.enter='update'>

 </li>

 

update(){

                 this.editid=-1

            }