ある要素が挿入された際に別の要素のCSSスタイルを変更する方法

Question

Vue.jsにて、動的にCSSを変更したいと考えています。
以下は、VueCliにてプロジェクトを作成し、その後作成した「Test.Vue」ファイルのテンプレート部分です。

<template>
  <div>
    <h1 class="title">Test</h1>
    <h5 class="header">テストヘッダー</h5>
    <p v-if="errors.length">
      <ul>
        <li class="error-msg" v-for="(error,index) in errors" :key="index">{{ error }}</li>
      </ul>
    </p>
    <form action="" method="get" v-on:submit.prevent="submit">
      <input type="text"  class="text-box" v-model="inputUrl" name="url">
      <button class="send-button" type="submit">送信</button>
    </form>
    <div id="app">
      {{ test }}
    </div>
  </div>
</template>
<style>
 .text-box{
  
    margin-top: 3%;
  
  }
</style>

こちら、現状はtext-boxに、margin-topに「3%」を指定していますが、
<p v-if="errors.length">ここの部分がTrueであり、エラーメッセージ一覧を表示する際はtext-boxの「margin」は「2%」にしたいと考えています。

「v-bind」による、動的な切り替えによる方法を模索中なのですが、現状方法が見当たらない状況です。
どなたか、ご助言頂けましたら幸いです。

Answer 1

条件によりクラスを切り替えるのは下記のようでできます。

<template>
    <p v-if="errors.length" :class="[errors.length ? 'mt-2p' : 'mt-3p']">
      <ul>
        <li class="error-msg" v-for="(error,index) in errors" :key="index">{{ error }}</li>
      </ul>
    </p>
</template>
<style>
.mt-3p { margin-top: 3%; }
.mt-2p { margin-top: 2%; }
</style>

Comments

[study_111]

いつもお世話になっております。
ご回答ありがとうございます。
クラスのバインディングは行った事がなく、どのように実現すれば良いか分からなかったのですが、ご回答頂き解決する事が出来ました。
誠に、助かりました。