vue整理--利用hash过滤数据

今天举一个利用hash过滤数据的栗子

1.前期准备

 

 上图界面中对应的代码如下

        <ul class="task-count" v-show="list.length">
            <li>{{noCheckeLength}}个任务未完成</li>
            <li class="action">
                <a class="active" href="#all">所有任务</a>
                <a href="#unfinished">未完成的任务</a>
                <a href="#finished">完成的任务</a>
            </li>
        </ul>

目前的效果是点击三个不同的按钮，地址栏会出现相应的变化，现在需要实现功能部分

2.功能部分

首先通过监听hashchange事件来取得hash值

function watchHashChange(){
	var hash = window.location.hash.slice(1);
	vm.visibility = hash;
	
}

watchHashChange();

window.addEventListener("hashchange",watchHashChange);

然后定义计算属性

最后界面上做如下改动