# 其它交互
:-: 
## 全選和取消全選
> 全選和取消全選,以及列表選中最頂部的選中按鈕也會有相應的效果（全部選中則頂部選中-如果有一個未選中則頂部不選中）。
```
<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>
~~~
