# 切換底欄
:-: 
> 切換進行中,會列舉出未選中的列表;切換已完成,會列舉出已選中的列表;當單擊刪除完成,會將已選中的列表刪除掉
> 同時在選中過程中,tab欄也會有選中狀態。
## 先做選中狀態
>[success] 可以在data中存一個狀態標識sign,當單擊底欄進行切換綁定方法,每一個按鈕都添加上自己的標識。
```
<footer id="footer"><span id="todo-count"><strong>0</strong>進行中</span>
<ul id="filters">
<li>
<a href="#" :class="{selected:sign==='all'}" @click="changeSign('all')">
全部
</a>
</li>
<li>
<a href="#" :class="{selected:sign==='avtiving'}" @click="changeSign('avtiving')">
進行中
</a>
</li>
<li>
<a href="#" :class="{selected:sign==='completed'}" @click="changeSign('completed')">
已完成
</a>
</li>
</ul>
……
</footer>
var vm = new Vue({
el: '#todoapp',
data: {
sign:'all',
……
},
……
methods: {
……
changeSign(val){
this.sign = val;
}
}
})
```
## 切換數據
> 切換按鈕時不僅要選中,還要切換數據,根據不同的功能做不同的事情。如何完成?
>[warning] 思考一下?可不可以直接將list的數據修改?
> 答案是不可以的!!因為我們切換為\*\* 進行中\*\* 此時list數組中只存在進行中的數據 ,再切換為 **全部** 會導致已完成的數據丟失
>[success] 如何解決?
> 我們可以再書寫一個數據為\*\*curlist ,**而**Iist \*\*只是做一個備份數據,每次操作數據都是從list中取出數據再來修改curlist即可。
```
<section id="main">
……
<ul id="todo-list">
<li :class="{completed:item.selected,editing:edit===index}"
v-for="(item,index) in curlist">
……
</li>
</ul>
</section>
var vm = new Vue({
el: '#todoapp',
data: {
……
curlist:local.get(),
list:local.get()
}
……
})
```
## list的數據同步到curlist中
>[danger] 現在會產生的問題是我們添加數據和刪除數據都不會成功,必須重新刷新才有效果,可以看下圖
:-: 
> 問題產生的原因是因為我們只是將`curlist`用了一下,
> 之前用戶交互時候:用戶輸入數據操作的是`list`,而不是`curlist`;刪除數據操作的都是list,都不是`curlist`
> 所以產生下面的問題
>[success] 解決
> 監聽list數據變化的時候將數據重新給到curlist上。
```
watch: {
list: {
handler() {
local.set(this.list)
this.curlist = local.get();
},
deep: true
}
}
```
>[warning] 注意這里面我們為什么不是this.curlist = this.list。如果是這樣的話,它們就是引用關系。會產生問題。我們需要拷貝一份新的數據,那么如何做呢?我們在獲取本地存儲數據時候其實已經是拷貝的數據了。
## 切換數據
>[warning] 思考題?
> 我們在切換中,要去修改數據,這個功能該如何進行?可能 會直接想到就在changeSign這個方法中,根據傳遞的val參數值的不同,進行判斷再去展示相應的數據即可。其實這種并不好!
> 1. 首先這個功能內部代碼冗余度很多。
> 2. 而且 if else的可擴展性不強,現在是只有三種情況,如果有更多情況,那判斷會更多。
> 3. 將來維護起來也會炒雞麻煩。
>[success] 解決
> **可以在全局定義一個對象,且對象中的key值剛好就是我們三個切換的標識**。在changeSign這個方法中調用的話只需要 \*\*對象.標識 \*\* 即可
> 想要擴展也很簡單,只需要給對象添加新的key即可。
```
var filter = {
all(list) {
return list
},
activing(list) {
return list.filter(item => item.selected === false)
},
completed(list) {
return list.filter(item => item.selected === true)
}
}
……
methods: {
……
changeSign(val) {
this.sign = val;
this.curlist = filter[val](this.list)
}
}
```