Vue2-样式相关

class绑定样式

<style>.base{width: 100px;height: 100px;}.a1{background-color: green;}.a2{border-radius: 20px;}
</style>
<div id="root"><!--    字符串--><div class="base" :class="classStr"></div><!--    数组--><div class="base" :class="classArr"></div><!--    对象--><div class="base" :class="classObj"></div>
</div>
<script type="text/javascript">const vm = new Vue({el: "#root",data() {return {classStr: 'a1',classArr: ['a1','a2'],classObj:{a1:false,a2:true}}}})
</script>

style绑定样式

<div id="root"><div :style="classObj">style绑定样式</div>
</div>
<script type="text/javascript">const vm = new Vue({el: "#root",data() {return {classObj:{// 单个单词color: 'red',// 多个单词小驼峰backgroundColor: '#666'}}}})
</script>