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
}
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
}
