Class绑定的对象语法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/vue"></script> <style type="text/css"> .active { width: 64px; height: 64px; background: blue; } .text-danger { background: red; } </style> </head> <body> <div id="app-1"> <div v-bind:class="{ active: isActive, textDanger: hasError }"></div> </div> <script type="text/javascript"> var vm1 = new Vue({ el: '#app-1', data: { isActive: true, hasError: false } }) </script> </body> </html>
最基础样式绑定，是否使用样式由后面的布尔值决定
也可以绑定一个对象，这样看起来代码更清爽一些
<div id="app-2"> <div v-bind:class="classObject"></div> </div> <script type="text/javascript"> var vm2 = new Vue({ el: '#app-2', data: { classObject: { active: true, 'text-danger': true } } }) </script>
这两段代码中有个地方要特别注意一下，Bootstrap的text-danger属性分别使用了textDanger（驼峰式）和text-danger（串联式）的写法，这2种写法Vue都是支持的，唯一要注意的是使用串联式要加单引号
例如：font-size属性，在Vue里面可以写成fontSize（驼峰式）或'font-size'（串联式）
Class绑定的数组语法
<div id="app-3"> <!-- 可以用三元表达式来选择性的渲染 --> <div v-bind:class="[activeClass, hasError ? errorClass : '']"></div> <!-- 也可以在数组语法中使用对象语法 --> <div v-bind:class="[activeClass, { errorClass: hasError }]"></div> </div> <script type="text/javascript"> var vm3 = new Vue({ el: '#app-3', data: { hasError: true, activeClass: 'active', errorClass: 'text-danger' } }) </script>
内联绑定的对象语法
<div id="app-4"> <div v-bind:style="{ color:activeColor, fontSize: fontSize + 'px' }">双子宫殿</div> </div> <script type="text/javascript"> var vm4 = new Vue({ el: '#app-4', data: { activeColor: 'red', fontSize: 30 } }) </script>
同样内联绑定也可以绑定一个对象
<div id="app-5"> <div v-bind:style="styleObject">Hello, TanSea!</div> </div> <script type="text/javascript"> var vm5 = new Vue({ el: '#app-5', data: { styleObject: { color: 'green', fontSize: '20px' } } }) </script>
内联绑定的数组语法
<div id="app-6"> <div v-bind:style="[ baseStyles, overridingStyles ]">Hello, TanSea!</div> </div> <script type="text/javascript"> var vm6 = new Vue({ el: '#app-6', data: { baseStyles: { color: 'blue', fontSize: '30px' }, overridingStyles: { fontFamily: '微软雅黑' } } }) </script>
总体来说，样式绑定相对来说是比较简单的，只要记住语法格式就行了