Vue dynamically binds class, style, background

Vue dynamically binds class, style, background

Dynamic binding class

:class=" currentIndex == 1 ? 'selected' : ' ' "
:class=" currentIndex  ? 'selected' : ' ' "

Dynamic binding style

Dynamic style judgment
:style="{color:active==true?'#FFFFFF':'#333333'}"

Dynamic binding background image

:style="{ backgroundImage: 'url(' + backgroundImage + ')' }"

Vue dynamically binds multiple classes

Non-dynamic styles are bound together with dynamic styles

animate__animated is the value that must be brought with an animation using Animate, just use a string.

The animate__shakeX is wrapped with an object and dynamically gives boolean values.

<el-tag
      type="success"
      effect="dark"
      @click="flag = !flag"
      :class="['animate__animated', { animate__shakeX: flag }]"
      >Click me to shake</el-tag
    >

data() {
    return {
      flag: true,
    };
  },

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.