當我們在使用Vue進行開發時，獲取class名稱是一件相當常見的事情。在Vue中，我們可以使用一些內置函數或者自己寫一些方法來獲取class名稱。在本文中，我們將通過一些實例來介紹如何在Vue中獲取class。

我們首先來看一下如何通過內置函數獲取class名稱。Vue提供了一個特殊的屬性$el，它可以讓我們訪問當前組件的根節點。我們可以調用$el.classList獲取該節點的class列表。以下是一個示例：

// 獲取當前組件根節點的class列表
const classList = this.$el.classList;
// 遍歷class列表并輸出
for (let i = 0; i< classList.length; i++) {
console.log(classList[i]);
}

這樣，我們就可以輕松獲取當前組件的所有class名稱。

除了$el外，Vue還提供了一些其他有用的屬性和方法來操作class。比如，在我們的模板中，可以使用:class來動態綁定class名稱。如下所示：

...

這段代碼可以將class1綁定到該元素上，因為它的值是true，而class2則不會被綁定，因為它的值是false。

除了內置函數和指令外，我們還可以通過一些自定義方法來操作class。比如，以下是一個獲取元素class列表的自定義方法：

methods: {
getClassList(el) {
const classList = [];
// 獲取class列表，并分割為數組
const classStr = el.getAttribute('class');
if (classStr) {
classList = classStr.split(' ');
}
return classList;
}
}

該方法接收一個元素作為參數，返回一個包含所有class名稱的數組。

另一個常見的需求是添加或刪除class。我們可以使用元素節點的classList屬性來實現這一功能。以下是一個添加class的方法：

methods: {
addClass(el, className) {
if (el.classList) {
el.classList.add(className);
} else {
el.className += ' ' + className;
}
}
}

該方法接收一個元素和class名稱作為參數，將該class添加到元素上。

最后，我們再看一個移除class的方法：

methods: {
removeClass(el, className) {
if (el.classList) {
el.classList.remove(className);
} else {
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
}

該方法接收一個元素和class名稱作為參數，將該class從元素上移除。

總之，以上是一些用于獲取和操作class的常見方法。當我們在Vue開發中遇到這類問題時，可以參考這些方法來實現我們的需求。同時，我們也可以根據項目的實際情況來選擇合適的方法，以達到最佳的開發效果。