在数据绑定中，最常见的就是元素样式名称class和内联样式style的动态绑定。
1.绑定class的几种方式
（1）对象语法
给v-bind:class绑定一个对象，通过对象的真假来切换class。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <div v-bind:class="{'active': isActive}"></div> <!--类名active会依赖数据isActive，当其为true的时候会拥有类名active，当其为false的时候没有--> </div> <script> var app = new Vue({ el:"#app", data: { isActive: true } }); </script> </body> </html>
渲染结果：
<div class="active"></div>
对象之中可以传入多个属性，来动态切换class，另外，:class可以与普通class共存。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <div class="static" :class="{ 'active':isActive, 'error':isError }"></div> </div> <script> var app = new Vue({ el: "#app", data: { isActive: true, isError: true } }) </script> </body> </html>
渲染结果：
<div class="static active error"></div>
当class表达式过长或逻辑复杂时，可以绑定一个计算属性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="app"> <div :class="classes"></div> </div> <script> var app = new Vue({ el: "#app", data: { isActive: true, error:null }, computed: { classes: function () { return { active: this.isActive && !this.error, //true && true == true } } } }) </script> </body> </html>
（2）数组语法
当需要应用多个class时，可以使用数组语法，给：class绑定一个数组，应用一个class列表。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <div :class="[activeCls, errorCls]"></div> </div> <script> var app = new Vue({ el: "#app", data: { activeCls: 'active', errorCls: 'error' } }) </script> </body> </html>
渲染结果：
<div class="active error"></div>
可以使用三元表达式来判断。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <div :class="[isActive ? activeCls : '', errorCls]"></div> <!--对象语法和数组语法混用--> <div :class="[{'active' : isActive}, errorCls]"></div> </div> <script> var app = new Vue({ el: "#app", data: { isActive: true, activeCls: 'active', errorCls: 'error' } }) </script> </body> </html>
2.绑定内联样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <div :style="{'color':color,'fontSize':fontSize + 'px'}">文本</div> </div> <script> var app = new Vue({ el:"#app", data: { color: 'yellow', fontSize:34 } }) </script> </body> </html>
还可以在data中直接定义。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <div :style="styles">实例</div> </div> <script> var app = new Vue({ el: "#app", //直接将样式写到data里面会更快捷 data: { styles: { color:'yellow', fontSize: '34px' } } // 使用计算属性也是可以 // computed:{ // styles: function () { // return { // color:'yellow', // fontSize: '34px' // } // } } }) </script> </body> </html>