<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>class与style绑定</title> <style type="text/css"> .static { font-weight: bold; } .class-a { color: blue; } .class-b { font-size: 22px; } </style> </head> <body> <!--1.绑定 HTML Class--> <!--对象语法--> <div id="example1" class="static" v-bind:class="{'class-a': isA, 'class-b': isB}">Hello Vue.</div> <!--数组语法--> <div id="example2" class="static" v-bind:class="[classA, classB]">Hello Vue.</div> <div id="example3" class="static" v-bind:class="[classA, isB ? classB : '']">Hello Vue.</div> <!--2.绑定内联样式--> <!--对象语法--> <div id="example4" class="static" v-bind:style="{color: activeColor, 'font-size': fontSize + 'px'}">Hello Vue.</div> <div id="example5" class="static" v-bind:style="styleObject">Hello Vue.</div> <!--数组语法--> <div id="example6" class="static" v-bind:style="[styleObjectA, styleObjectB]">Hello Vue.</div> <script type="text/javascript" src="vue.min.js"></script> <script> // example 1 let vm1 = new Vue({ el: '#example1', data: { isA: true, isB: false } }); console.log(vm1.$el); // example 2 let vm2 = new Vue({ el: '#example2', data: { classA: 'class-a', classB: 'class-b' } }); console.log(vm2.$el); // example 3 let vm3 = new Vue({ el: '#example3', data: { classA: 'class-a', classB: 'class-b', isB: false } }); console.log(vm3.$el); // example 4 let vm4 = new Vue({ el: '#example4', data: { activeColor: 'red', fontSize: '30' } }); console.log(vm4.$el); // example 5 let vm5 = new Vue({ el: '#example5', data: { styleObject: { color: 'red', fontSize: '25px' } } }); console.log(vm5.$el); // example 6 let vm6 = new Vue({ el: '#example6', data: { styleObjectA: { color: 'blue', fontSize: '35px' }, styleObjectB: { 'text-decoration': 'underline' } } }); console.log(vm6.$el); </script> </body> </html>
结果：
