# 切换底栏
:-: 
> 切换进行中，会列举出未选中的列表；切换已完成，会列举出已选中的列表；当单击删除完成，会将已选中的列表删除掉
> 同时在选中过程中，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)
}
}
```
