通过 v-bind:class 或者 :class 来为 style 或者 class 来绑定
绑定 class
- <div class="test">
- <div :class="{active:isActive,cc:isCc}">
- </div>
- </div>
js 代码
- var myvue = new Vue({
- el: ".test",
- data: {
- isActive: true,
- isCc: false
- },
- });
或者下面的代码也可以实现
- <div class="test">
- <div :class=classObject>
- </div>
- </div>
js 代码
- var myVue = new Vue({
- el: ".test",
- data: {
- classObject: {
- active: true
- }
- },
- });
通过过数组将 class 绑定
- <div class="test">
- <div :class="[activeClass,error]">
- dsdsd
- </div>
- </div>
js 代码
- var myVue = new Vue({
- el: ".test",
- data: {
- activeClass: "active",
- error: "ddd"
- },
- });
绑定 style 属性
- <div class="test">
- <div :style=styleObject>
- dsdsd
- </div>
- </div>
js 代码
- var myVue = new Vue({
- el: ".test",
- data: {
- styleObject: {
- color: "red",
- fontSize: "30px"
- }
- },
- });
来源: http://www.92to.com/bangong/2016/12-11/14217394.html