Vue的active class鏈接可以方便地控制頁面中的元素樣式,特別是在使用Vue-router進行路由切換時非常實用。而拼接active class則更加靈活方便,下面我們來一起學習它的使用方法。
首先,我們需要定義一個變量來記錄當前的路由路徑,代碼如下:
data() { return { activePath: '' } }, watch: { $route: function(currentRoute) { this.activePath = currentRoute.path; } }
然后,在頁面元素中使用三元運算符來判斷是否為當前路徑,確定是否添加active class鏈接,例如:
- 首頁
- 關于
- 服務
如果有多個class鏈接需要拼接,我們可以使用數組的方式,例如:
以上就是Vue的active拼接的使用方法了,它可以讓我們在頁面樣式切換上更加靈活方便,為我們開發提供了很好的幫助。