5、样式绑定 · 2021 web前端工程师

# 5、样式绑定 # 3.6样式绑定 1.class样式处理 ● 对象语法 ~~~ // active类名 isActive 数据data 的数据 <div v-bind:class="{ active: isActive }"></div> ~~~ ● 数组语法 ~~~ <div v-bind:class=" [activeClass, errorClass]"></div> ~~~ ## 对象语法 ~~~ <style type="text/css"> .active { border: 1px solid red; width: 100px; height: 100px; } .error { background-color: orange; } </style> <body> <div id="app"> <div v-bind:class="{active: isActive,error: isError}"></div> <button v-on: click='handle'>切换</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 样式绑定 */ var Vm = new Vue({ el:' #app', data: { isActive: true, isError: true }, methods: { handle: function(){ //控制isActive的值在true和false之间进行切换 this.isActive = !this.isActive; this.isError = !this.isError; } } }); </script> ~~~ 数组语法 ~~~ <style type="text/css"> .active { border: 1px solid red; width: 100px; height: 100px; } .error { background-color: orange; } </style> <body> <div id="app"> <div v-bind:class=' [activeClass, errorClass]'>测试样式</div> <button v-on: click=' handle'>切换</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 样式绑定 */ var Vm = new Vue({ el:' #app', data: { activeClass:'active', errorClass :'error' }, methods: { handle: function(){ //控制isActive的值在true和false之间进行切换 this.activeClass = ' ' ; this.errorClass = ' ' ; } } }); </script> ~~~ 样式绑定相关语法细节: 1、对象绑定和数组绑定可以结合使用 2、class绑定的值可以简化操作 3、默认的class如何处理? 默认的class会保留 ## 2\. style样式处理 ● 对象语法 ~~~ <div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div> ~~~ ● 数组语法 ~~~ <div v-bind: style=" [baseStyles, overridingStyles]"></div> ~~~