多皮膚切換，指的是在一個網站或應用中，有多種不同的樣式風格供用戶選擇，并在用戶選擇后，網站或應用中的所有頁面都顯示用戶所選擇的樣式風格。
在Vue中，可以通過使用不同的CSS文件或在Vue組件中定義不同的class名稱來實現多皮膚切換。下面是一種實現多皮膚切換的方式：
// index.html
<!DOCTYPE html>
<html>
<head>
<link id="skin" rel="stylesheet" href="default.css">
</head>
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script src="app.js"></script>
<script>
var skinSelector = document.getElementById('skin');
var skins = {
'default': 'default.css',
'blue': 'blue.css',
'purple': 'purple.css'
};
new Vue({
el: "#app",
methods: {
changeSkin: function(skin) {
skinSelector.setAttribute('href', skins[skin]);
}
}
});
</script>
</body>
</html>在上面的例子中，我們在index.html文件中定義了一個link元素，它的rel屬性值為stylesheet，href屬性值為"default.css"，即默認樣式文件。
我們還定義了一個皮膚選擇器，它包含了三種不同的皮膚：default、blue和purple。
在Vue的實例中，我們定義了一個changeSkin方法，它會根據用戶選擇的皮膚名稱動態改變link元素的href屬性，從而切換到對應的皮膚。
接下來，我們需要在不同的組件或元素中使用不同的class名稱，來讓組件或元素顯示不同的樣式。比如下面的例子：
<template>
<div :class="{'header': true, 'header-dark': dark}">Hello World</div>
<style scoped>
.header {
background-color: #eee;
height: 100px;
line-height: 100px;
text-align: center;
}
.header-dark {
background-color: #333;
color: #fff;
}
</style>
</template>
<script>
export default {
data() {
return {
dark: false
}
}
}
</script>在這個例子中，我們定義了一個名為header的組件，并根據dark的值來決定是否顯示header-dark的樣式。當dark的值為false時，header組件將顯示header的樣式，否則顯示header-dark的樣式。
如此，我們便可以通過改變link元素的href屬性或組件的class名稱，來實現多種不同的樣式風格。同時，在Vue的組件中，我們還可以根據需求添加更多的皮膚選擇器或自定義樣式。