Vue - computed styles

Poznajemy binding dla class i style tak, aby computed values je wyznaczały dynamicznie. Kolejna łatwa, prosta i przyjemna lekcja. Do dzieła.

Ok, za przykład posłuży nam komponent z pewnego kursu internetowego, który później rozbudujemy:

<template>
    <span class="badge" :class="classes">{{ caption }}</span>
  </template>
  
  <script>
  export default {
    props: ['type', 'caption'],
    computed: {
      classes() {
        return {
          'badge--admin': this.type === 'admin',
          'badge--author': this.type === 'author',
        };
      },
    }
  };
  </script>
  
  <style scoped>
  .badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 30px;
    background-color: #ccc;
    color: #2e2e2e;
  }
  
  .badge--admin {
    background-color: #810036;
    color: white;
  }
  
  .badge--author {
    background-color: #002c8a;
    color: white;
  }
  </style>

Od razu widzimy, jak działają computed values w prawdziwym projekcie. :class to binding dla class. Swoją drogą mamy tam zarówno class jak i :class.

To pierwsze – statyczna wartość, która nie ulegnie zmianie. To drugie – dynamiczna wartość, wyliczana przez computed property. Jedno i drugie może istnieć obok siebie, zostanie zbatchowanie w jedną całość.

Ok, dodajemy i używamy w App.vue:

<template>

  //(...)

  <base-badge type="admin" caption="ADMIN"></base-badge>
  <base-badge type="author" caption="author"></base-badge>

</template>

<script>

//(...)
import BaseBadge from './components/BaseBadge.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
    FirstComponent,
    PropsComponent,
    BaseBadge
  }
}

</script>

//(...)

Działa. Prop jest używamy przez computed property, która decyduje o tym, jakie klasy dostanie element. Teraz zrobimy sobie bindowanie stylów CSS:

<template>
    <span class="badge" :class="classes" :style="styles">{{ caption }}</span>
  </template>
  
  <script>
  export default {
    props: ['type', 'caption', 'fs', 'm_inline'],
    computed: {
      classes() {
        return {
          'badge--admin': this.type === 'admin',
          'badge--author': this.type === 'author',
        };
      },
      styles(){
        return {
            'font-size': this.fs + "px",
            'margin-inline': this.m_inline + "px",
            'font-weight': this.type === 'admin' ? 'bold' : 'normal'
        }
      }
    }
  };
  </script>

Teraz wystarczy tylko tego użyć:

<base-badge type="admin" caption="ADMIN" m_inline="16" fs="22"></base-badge>
<base-badge type="author" caption="author" fs="14"></base-badge>

Wszystko działa bezproblemowo.

Vue – computed styles