Vue 过滤数据
利用hash過濾數(shù)據(jù)。
效果演示
初始樣式
點(diǎn)擊
將三種字體分別設(shè)置為相對(duì)應(yīng)的顏色,使用hash過濾器,不管點(diǎn)擊那個(gè)顏色的字體時(shí)都會(huì)顯示成紅色。
在開始我們的代碼之前請(qǐng)注意:
引入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'}">顯示藍(lán)色字體</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>了解更多關(guān)注我呦!!!
總結(jié)
- 上一篇: IDEA 载入jQuery的方法
- 下一篇: antd table排序 vue_ant