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

不是不知道

目录

• Vue动态绑定class、style、background
  
  
  
  • 动态绑定class
    
  • 动态绑定style
    
  • 动态绑定background背景图
    
  
  
• Vue动态绑定多个class
  
• 总结
  

Vue动态绑定class、style、background


动态绑定class

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

复制代码

动态绑定style

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

复制代码

动态绑定background背景图

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

复制代码

Vue动态绑定多个class

非动态样式与动态样式一起绑定
animate__animated是使用Animate动画必须要带的值，用字符串即可。
后面的animate__shakeX用对象包裹，动态给布尔值。

1. <el-tag
   
2.       type="success"
   
3.       effect="dark"
   
4.       @click="flag = !flag"
   
5.       :class="['animate__animated', { animate__shakeX: flag }]"
   
6.       >点我晃动</el-tag
   
7.     >

复制代码

1. data() {
   
2.     return {
   
3.       flag: true,
   
4.     };
   
5.   },

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持晓枫资讯。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

澹台思云

顶顶更健康！！！

柳娅雅

路过，支持一下