vue输入换肤

要实现换肤的功能，可以通过修改页面的 CSS 样式或者动态加载不同的 CSS 文件来实现。下面是一个实现 vue 输入换肤的简单示例：

1. 在项目中创建多套皮肤的 CSS 文件，例如：skin1.css、skin2.css、skin3.css。

2. 在 vue 组件的 data 中定义一个变量，用于存储当前选中的皮肤的编号，例如：

   data() {
       return {
           currentSkin: 1
       }
   }

3. 在组件模板中，在需要换肤的元素中使用动态绑定 class 的方式，绑定不同皮肤的 class 名称，例如：

   <div :class="'skin' + currentSkin">这是一个需要换肤的元素</div>

4. 在组件中定义一个方法，用于切换皮肤：

   methods: {
       changeSkin(skin) {
           this.currentSkin = skin;
       }
   }

5. 在需要切换皮肤的地方，调用 changeSkin 方法，修改 currentSkin 变量的值，例如：

   <button @click="changeSkin(1)">皮肤1</button>
   <button @click="changeSkin(2)">皮肤2</button>
   <button @click="changeSkin(3)">皮肤3</button>

6. 在组件的 mounted 钩子中，动态加载当前选中的皮肤对应的 CSS 文件，例如：

   mounted() {
       let link = document.createElement('link');
       link.rel = 'stylesheet';
       link.href = 'skin' + this.currentSkin + '.css';
       document.head.appendChild(link);
   }

这样，在切换皮肤时，会动态加载对应的 CSS 文件，从而实现换肤的效果。