动态class写法

我就是我 2021-07-25 19:47 566阅读 0赞

两种动态class写法

  1. :class="`showAi?'animate__animated animate__bounce':''`"

或者

  1. :class="{cur:current==index}"//最简单写法
  3. <template>
  4.   <view style="display: flex;justify-content: center;">
  5.     <image 
  6.     :class="{'animate__animated animate__slideInDown':showAi}"
  7.     src="../../static/uni.png" 
  8.     mode="" 
  9.     style="width: 100px;height: 100px;"></image>
  10.     <button type="default" @click="beginAnimate"></button>
  11.   </view>
  12. </template>
  14. <script>
  15. import "animate.css"
  17. export default { 
  18.   name: '',
  19.   data () { 
  20.     return { 
  21.       showAi:false
  22.     }
  23.   },
  24.   methods:{ 
  25.    beginAnimate(){ 
  26.        this.showAi=true
  27.    }
  28.   }
  29. }
  30. </script>
  32. <style lang="less" scoped>
  34. </style>

发表评论

表情：
评论列表 （有 0 条评论，566人围观）

还没有评论，来说两句吧...

相关阅读

    相关 uni动态class

    niapp中给动态数据添加动态class的时候 有固定的class和动态的class共存的时候 class是可以和 ：class共存的  所以可以 <te...

    矫情吗；*矫情吗；*/ 0 赞/ 100 阅读

    相关 vue 动态样式写法

    在Vue中，可以使用动态样式来根据组件的数据或计算属性来动态地设置元素的样式。Vue提供了多种方式来实现动态样式的写法，以下是几种常见的方法： 使用:style指令： 可以

    喜欢ヅ旅行喜欢ヅ旅行/ 0 赞/ 180 阅读

    相关 vue动态绑定class

    Vue.js 允许您使用 v-bind 指令或简写的 : 来动态绑定 class 属性。这允许您基于某些条件为元素添加或删除类名，从而实现动态样式控制。以下是一些示例： 动态

    ╰+攻爆jí腚メ╰+攻爆jí腚メ/ 0 赞/ 91 阅读

    相关 Class类动态加载

    Class.forName("类的全称") 不仅表示了类的类类型，还代表了动态加载类。 请区分编译、运行。 编译时刻加载类是静态加载类，运行时刻加载类是动态加载类。

    我不是女神ヾ我不是女神ヾ/ 0 赞/ 326 阅读