1 .一鍵改變主題
<template>
<div>
<ul>
<li>
<div @click="handleClick('a')">
red
</div>
<div @click="handleClick('b')">yellow</div>
<div>green</div>
</li>
</ul>
<div :class="currentTheme">
實驗實驗
</div>
</div>
</template>
<script>
export default {
data:function(){
return {
currentTheme:''
}
},
methods:{
handleClick(value){
console.log(value)
if(value=='a'){
this.currentTheme='themeA'
}else if(value=='b'){
this.currentTheme='themeB'
}
}
}
}
</script>
<style lang="less" src="./f1.less">
</style>
2 .less
@name:.face;
.themeA{
.theme()
}
.themeB{
.theme(blue,#fff)
}
.themeC{
.theme(red,#fff)
}
