Styling elements with Vue

Inline Styles

<h2 v-bind:style="{ color: breakingNewsColor, 'font-size': breakingNewsFontSize }">Breaking News</h2>

const app = new Vue({ 
  data: { 
    breakingNewsColor: 'red',
    breakingNewsFontSize: '32px'
  }
});

Computed Style Objects

<h2 v-bind:style="breakingNewsStyles">Breaking News</h2>

const app = new Vue({ 
  data: { 
    breakingNewsStyles: { 
      color: 'red',
      'font-size': '32px'
    }
  }
});

Multiple Style Objects

const app = new Vue({ 
  data: {
    newsHeaderStyles: { 
      'font-weight': 'bold', 
      color: 'grey'
    },
    breakingNewsStyles: { 
      color: 'red'
    }
  }
});

<h2 v-bind:style="[newsHeaderStyles, breakingNewsStyles]">Breaking News</h2>

Classes

<span v-bind:class="{ unread: hasNotifications }">Notifications</span>

.unread {
  background-color: blue;
}

const app = new Vue({
  data: { notifications: [ ... ] },
  computed: {
    hasNotifications: function() {
      return notifications.length > 0;
    }
  }
}

Class Arrays

<span v-bind:class="[{ unread: hasNotifications }, menuItemClass]">Notifications</span>

const app = new Vue({
  data: { 
    notifications: [ ... ],
    menuItemClass: 'menu-item'
  },
  computed: {
    hasNotifications: function() {
      return notifications.length > 0;
    }
  }
}

.menu-item {
  font-size: 12px;
}

.unread {
  background-color: blue;
}

Descargar la DEMO completa