Vue.jsで条件に合わせて属性を変更する

例えばCSSフレームワークbulmaでボタンをクリックできなくする属性disabledを条件によって分岐したい場合でやってみる。
disabled === true のときはボタンが押せなくなり、falseのときは押下可能。
参考: https://bulma.io/documentation/elements/button/

.vue

<template>
  <div>
    <button class="button" v-bind="buttonAttr"></button>
  </div>
</template>

computedでif文や三項演算子で条件分岐してreturnすればよい。
例えばbtnFlgというdataを用意して、それのbool値で判断する場合。

.vue

export default {
  computed: {
    buttonAttr() {
      return this.btnFlg
        ? { disabled: true }
        : { disabled: false }
    }
  }

もちろん、よく使うclassやhrefなどどんな属性でもこんな風に書けるから結構便利。