# 其它交互
:-: 
## 全选和取消全选
> 全选和取消全选,以及列表选中最顶部的选中按钮也会有相应的效果（全部选中则顶部选中-如果有一个未选中则顶部不选中）。
```
<section id="main">
<input v-model="all" id="toggle-all" type="checkbox">
……
</section>
```
```
el: '#todoapp',
data:{
……
}
computed:{
all:{
get(){
return this.list.length&&filter['completed'](this.list).length === this.list.length ;
},
set(newval){
this.list.forEach(item=>{
item.selected=newval;
})
}
}
},
```
>[success] 解释
> `all`这个属性通过`computed`计算属性计算后，会将计算的结果添加到`Vue`实例对象的属性中。
> 而`all`的值其实取决于 **已完成** 数组的数量，如果数量和总数组相同，那不就是说所有的列表都是已完成状态。当然还要注意，数组必须有元素，如果没有元素默认应该也处于未选中状态。
> 当它进行修改时，操作的是set这个值，它会将当前表单的值，用`newval`形参传递。我们需要将所有列表项的状态修改为`newval`
## 删除完成
```
<footer id="footer"><span id="todo-count"><strong>0</strong>进行中</span>
……
<button id="clear-completed" style="" @click="removeall">删除完成</button>
</footer>
……
methods:{
removeall(){
this.list = filter['activing'](this.list);
}
}
```
>[success] 解释：
> 删除已完成，其实剩余的自然就是 **进行中** 的列表。那么我们只需要将 list的数据修改为 **进行中** 的数据即可
## 进行中的数量
```
<footer id="footer"><span id="todo-count"><strong>{{left}}</strong>进行中</span>
……
</footer>
computed:{
……
left(){
return filter['activing'](this.list).length
}
}
```
## 显示删除完成
```
<footer id="footer"><span id="todo-count"><strong>0</strong>进行中</span>
……
<button id="clear-completed" style="" @click="removeall" v-show="list.length-left">
删除完成
</button>
</footer>
```
> 删除完成是当所有的列表有一个处理已完成就显示，其实就是如果数据的总长度和left**相等就不显示，不相等就显示**或者 **所有列表的数量减掉进行中的数量**再进行显示即可
## 隐藏列表和尾部
> 当列表中没有数据，则不显示列表和尾部的tab栏
~~~
<section id="main">
……
<ul v-show="list.length" id="todo-list">
……
</ul>
</section>
<footer v-show="list.length" id="footer">
<span id="todo-count"><strong>{{left}}</strong>进行中</span>
……
</footer>
~~~
