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

更新时间：2025年01月16日 09:02:19 作者：小叮当口袋

文章主要介绍了在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,
    };
  },

总结

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

您可能感兴趣的文章:

vue better-scroll插件使用详解
本篇文章主要介绍了vue better-scroll插件使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
Vee-validate 父组件获取子组件表单校验结果的实例代码
vee-validate 是为 Vue.js 量身打造的表单校验框架，允许您校验输入的内容并显示对应的错误提示信息。这篇文章主要介绍了Vee-validate 父组件获取子组件表单校验结果 ,需要的朋友可以参考下
2019-05-05
element select必填项验证回显问题的解决
本文主要介绍了element select必填项验证回显问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
前端vue实现的h5页面接入微信支付流程(jsapi方式)
vue实现微信支付有三种方式,第一种方式是PC端支付,第二种方式是H5支付,第三种方式是微信公众号支付,这篇文章主要给大家介绍了关于前端vue实现的h5页面接入微信支付流程,文中介绍的方法是利用jsapi方式,通过代码将实现的方法介绍的非常详细,需要的朋友可以参考下
2024-01-01
vue-cli 引入、配置axios的方法
这篇文章主要介绍了vue-cli 引入axios的方法,文中还给大家提到了vue-cli 配置axios的方法，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-05-05
vue关于Promise的使用方式
这篇文章主要介绍了vue关于Promise的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
Vue CLI 中常用的加载器及其配置小结
本文主要介绍了Vue CLI 中常用的加载器及其配置,及如何根据项目需求进行自定义扩展,具有一定的参考价值,感兴趣的可以了解一下
2025-06-06
vuex mutation action同级调用方式
这篇文章主要介绍了vuex mutation action同级调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
ant design vue pro 支持多页签模式问题
这篇文章主要介绍了ant design vue pro 支持多页签模式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
使用vue3.2实现多页签导航
这篇文章主要为大家详细介绍了如何使用vue3.2 + elementPlus + pinia 实现多页签导航,文中的示例代码讲解详细,有需要的小伙伴可以参考一下
2023-12-12