VueJs Shortcut

Two way data binding

<a v-bind:href="url">...</a>
<a :href="url">...</a> // Shorthand

True or false:

<button :disabled="isTrue">...</button>
<div :class="{ active: isActive }">...</div>
<div :class="{ red: userFound }">...</div>

Class

<div class="text-success" :class="{ 'text-danger': isDanger}">class binding</div>

Style color set to value:

<div :style="{ color: Color }">...</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            Color:'#111999',
        }
    })
</script>

this div will have the red class if the isAdmin variable is set to true

<div :class="[isAdmin ? 'red' : 'blue']">...</div>