利用hash过滤数据。
效果演示
初始样式
点击
将三种字体分别设置为相对应的颜色,使用hash过滤器,不管点击那个颜色的字体时都会显示成红色。
在开始我们的代码之前请注意:
引入Vue.js架包
代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/vue.js"></script>
</head>
<body>
<a href="#red" : class="{active:show==='red'}">显示红色字体</a>
<a href="#blue" : class="{active:show==='blue'}">显示蓝色字体</a>
<a href="#black" : class="{active: show==='black'}">显示黑色字体</a>
</body>
<script>var vm = new Vue({el:'#app',data:{show:'red'}});function hash(){var hash = window.location.hash.slice(1);vm.isShow = hash;}hash();window.addEventListener('hashchange',hash)//事件:hashchange
</script>
</html>
了解更多关注我呦!!!