色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue項(xiàng)目寫兩套css

林國瑞2年前10瀏覽0評論

在vue項(xiàng)目中,有時(shí)候需要使用兩套不同的css樣式來適配不同的場景或設(shè)備。這里我們介紹一種簡單的實(shí)現(xiàn)方法。

// 引入兩個(gè)css文件,分別存放于src/assets/css目錄下
import '@/assets/css/style1.css';
import '@/assets/css/style2.css';
export default {
name: 'App',
data() {
return {
isMobile: false // 標(biāo)識是否是手機(jī)端
}
},
mounted() { // 計(jì)算是否為手機(jī)端
this.isMobile = this.$mq === 'mobile' ? true : false;
},
computed: {
styleSheet() { // 根據(jù)isMobile值返回相應(yīng)的css文件
return this.isMobile ? 'style1' : 'style2';
}
},
methods: {
loadStyleSheet() { // 動(dòng)態(tài)插入link標(biāo)簽
const head = document.querySelector('head');
const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = `./${this.styleSheet}.css`;
head.appendChild(link);
}
},
watch: {
styleSheet() { // 監(jiān)聽styleSheet值的變化
const links = document.querySelectorAll('link');
links.forEach(link =>{
if (link.href.indexOf('style') !== -1) {
link.remove();
}
})
this.loadStyleSheet();
}
}
}

我們在組件中定義了一個(gè)名為styleSheet的計(jì)算屬性,用于根據(jù)isMobile值返回相應(yīng)的css文件名。然后用loadStyleSheet()方法動(dòng)態(tài)插入link標(biāo)簽,實(shí)現(xiàn)動(dòng)態(tài)加載css。

這樣就可以在vue項(xiàng)目中實(shí)現(xiàn)同時(shí)加載不同的css樣式的功能了。