html主题切换,vue 切换主题（换肤）功能

一：先写好两个css样式放在static文件夹中

二：在index.html中添加css link链接

三：在App.vue中的 created中添加默认执行方法

created() {

var style = localStorage.getItem("style");

if(style){

document.getElementById('style').setAttribute("href",style); //实现将主题保存在内存中刷新浏览器不改变

}

}

四：最后在需要的页面写上切换主题功能

export default {

name: "ThemeBody",

data(){

return{

body_now:null

}

},

methods:{

change:function (type) {

if(type == 1){

document.getElementById('style').setAttribute("href","../static/css/one.css");

localStorage.setItem("style","../static/css/one.css");

}else if(type == 2){

document.getElementById('style').setAttribute("href","../static/css/two.css");

localStorage.setItem("style","../static/css/two.css");

}

}

}

}

完成效果