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+swiper实现组件化开发的相关资料,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了使用Vue如何写一个双向数据绑定，在前端面试过程中经常会问到，文中主要实现v-model，v-bind 和v-click三个命令，其他命令也可以自行补充。需要的朋友可以参考下2018-04-04
vue3 v-bind="$attrs"继承组件全部属性的解决方案
这篇文章主要介绍了vue3 v-bind=“$attrs“ 继承组件全部属性的解决方案,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要为大家介绍了vue组件historyApiFallback作用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
vue-grid-layout是一个vue栅格拖动布局的组件,下面这篇文章主要给大家介绍了关于前端开发指南之vue-grid-layout使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
Vue3报错‘defineProps‘ is not defined的解决方法
最近工作中遇到vue3中使用defineProps中报错,飘红,所以这篇文章主要给大家介绍了关于Vue3报错‘defineProps‘ is not defined的解决方法,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了VueJs组件之父子通讯的方式，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-05-05
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
这篇文章主要介绍了Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制的相关知识，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
这篇文章主要给大家介绍了vant样式不生效问题的解决办法,文中通过示例代码介绍的非常详细,对大家学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue+element项目里实时监听某个div宽度的变化,然后执行相应的事件,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-08-08
最新评论