Vue.js - Attribute and Class Binding

by wistcc

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
    <span v-bind:title="title">Hover me!</span>
    <br/>
    <input type="text" v-bind:placeholder="placeholder" />
    <br/>
    <span v-bind:style="styles">Span with style!</span>
    <br/><br/>
    <button @click="addClass = !addClass"> Add or remove class </button>
    <br/>
    <span v-bind:class="{'coolClass': addClass}">Span with classes!</span>
</div>

CSS

.coolClass {
  color: blue;
  font-size: 45px
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    title: 'I am the tile',
    placeholder: 'I am the placeholder',
    styles: {
      color: 'red',
      fontSize: '13px'
    },
    addClass: true,
  }
})