JavascriptのコードをVue.jsに書き換えてみた(動的なクラスの設定Ver)

javascriptのコード

<!-- JavaScript -->
<div id="app">
  <div id="dynamicClass" class="defaultClass">動的なクラスの設定</div>
</div>

<script>
  // JavaScript
  var dynamicClass = document.getElementById("dynamicClass");
  var isActive = true;
  var hasError = false;

  if (isActive) {
    dynamicClass.classList.add("active");
  } else {
    dynamicClass.classList.remove("active");
  }

  if (hasError) {
    dynamicClass.classList.add("text-danger");
  } else {
    dynamicClass.classList.remove("text-danger");
  }
</script>

Vue.jsのコード

<!-- JavaScript -->
<div id="app">
  <div :class="{ active: isActive, 'text-danger': hasError }">動的なクラスの設定</div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      isActive: true,
      hasError: false
    }
  });
</script>