Binding class property: Leveraging computed properties

by edith_tang

HTML

<div id="app">
  <div :class="[{'active': isActive}, errorCls]">
    这是一段文字<br>
    <button :class="classes">
      按钮
    </button>
  </div>
</div>

CSS

.active {
  background: #333;
  width: 200px;
  height: 200px;
}

.error {
  color: red;
  text-decoration: line-through
}

button {
   color: #fff;
   border: none;
}

.btn-large {
  padding: 10px 20px;
  font-size: 16px;
  background: skyblue;
}

.btn-disabled {
  background: gray;
}

JavaScript

var app = new Vue({
	el: '#app',
  data: {
  	errorCls: 'error',
    isActive: true,
    size: 'large',
    disabled: true
  },
  computed: {
  	classes: function() {
    	return [
      	'btn',
        {
        	['btn-' + this.size] : this.size !== '',
          ['btn-disabled'] : this.disabled
        }
      ]
    }
  }
})