<div :class="[ isOne?'one':'', 'two']">数组方法 </div>
2.对象方法，元素键名为css名称，用true和false 来控制是否显示
<div :class="{'one':isOne,'two':true}">对象方法</div>
3.直接加入，加入的内容是css名称，可以通过计算来控制显示的css，名称
<div :class="isOne?'one':'two'" >直接加入</div>
1.数组方法,元素是一个个对象，对象则是style的键值对，当然可以用三目运算控制
<div :style="[{color: 'green',fontSize: '30px'} , isOne ?{'font-weight': 'bold'}:{}]" >数组方法</div>
2.对象方法，元素键名为style名称，值为style属性值。当然可以用三目运算控制来控制是否显示对应的style属性值
<div :style="{ color: isOne ?'green':'#f00' , backgroundColor:'#f00'}" >对象方法</div>
3.直接加入，只要保证得出来的字符串是正确的即可，怎么用都可以
<div :style="(isOne ? 'color:green' : '')+ 'backgroundColor:#f00' ">直接加入</div>
可以使用一个用来引入css文件的组件
<template><div>
<style type="text/css" :src="'/path/to/' + theme + '.css'"></style>
</div>
</template>
<script>
export default {
data () {
return {
theme: 'your-custom-theme'
}
}
}
</script>
注：以上代码没有经过测试，纯理论指导。应该没问题。还有更高级一点的用法是通过vuex状态管理，篇幅比较大，这里不敲这么多代码，反正道理是一样的。
