当前位置: 代码网 > it编程>前端脚本>Vue.js > Vue动态绑定class、style、background的方式

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

2025年02月13日 Vue.js 我要评论
vue动态绑定class、style、background动态绑定class:class=" currentindex == 1 ? 'selected' : ' ' ":class=" curren

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,
    };
  },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com