🌯 Random Tag Style Vue - Bulma

VUEJAVASCRIPTTIPSBULMACSS

Random CSS cukup dengan me-look-up tabel pilihan style tag dari Bulma CSS. Implementasi fungsi randomTagStyle akan mengembalikan style secara random.

methods: {
    randomTagStyle() {
      let arrTagStyle = [
        'is-black', 
        'is-dark', 
        'is-light', 
        'is-primary', 
        'is-link', 
        'is-success', 
        'is-warning', 
        'is-danger'
      ]
      return arrTagStyle[Math.floor(Math.random() * arrTagStyle.length)]
    },
    //...
}

v-bind class agar tiap style di apply di span

 <p class="level-left has-text-centered">
    <span v-for="tag in formatTags()" class="tag is-medium"
    v-bind:class="randomTagStyle()">
      {{ trimTag(tag) }}
    </span>
 </p>

Hasil style deretan tag seperti dibawah ini

Random Tag Style

Equan Pr.

Equan Pr. (@junwatu)