Vue 復習中

thisによる参照

thisが指すのはVueインスタンス自身

data: {
  items: [
    {
      name: 'item1',
      price: 200,
      quantity: 3
    },
    {
      name: 'item2',
      price: 340,
      quantity: 2
    },
  ]
},   
computed: {
  totalPrice() {
    // this.itemsはこのVueインスタンスのdataのitems
    return this.items.reduce((sum, item) => {
      return sum + (item.price * item.quantity)
    }, 0)
}

---

クラスのバインディング

v-bind:class(:class)は、属性値にオブジェクトを指定した場合に、値が真のプロパティ名をclass属性値として反映する。

<p v-bind:class="{error: isError}">
  errorです
</p>

isErrorがtrueのとき、classの属性値がerrorになる(class="error"になる)

{}の中身が複雑になるようなら、算出プロパティとしてVueinstanceに移すほうが良い。

<p v-bind:class="errorMessageClass">
  errorです
</p>

computed: {
  errorMessageClass() {
    return {
      error: isError
    }
  }
}