todomvc 组件编写逻辑

Posted 2022-01-03 xiannv

第一步创建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