首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue动态绑定class、style、background

Vue动态绑定class、style、background的方式

2025-01-16 09:02:20 作者：小叮当口袋

文章主要介绍了在Vue.js中如何使用动态绑定class、style和background来实现动态样式和背景图的设置,通过v-bind指令,可以灵活地根据数据变化来动态更新元素的样式和背景

Vue动态绑定class、style、background

动态绑定class

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

动态绑定style

动态样式判断
:style="{color:active==true?'#FFFFFF':'#333333'}"

动态绑定background背景图

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

Vue动态绑定多个class

非动态样式与动态样式一起绑定

animate__animated是使用Animate动画必须要带的值，用字符串即可。

后面的animate__shakeX用对象包裹，动态给布尔值。

<el-tag
      type="success"
      effect="dark"
      @click="flag = !flag"
      :class="['animate__animated', { animate__shakeX: flag }]"
      >点我晃动</el-tag
    >

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。