解决VUE下动态改变CSS样式不生效

// lot component
<student-chip
:key="student.id" 
:isLotted="currStudentId===student.id" 
 v-for="student in students" 
:student="student" 
:layout="layout">
</student-chip>

目的是抽签选一个学生答题,具体实现通过计时器迭代随机数,迭代时间逐渐增长实现视觉效果,在这里isLotted是传给自组件的实现css变化的属性,lot是子组件中的css类名,如下图
// studentchip component
<div :class="{'lot':isLotted,'lotted': wasLotted}"> <div-if="layout === 'large'"></div>

    抽签方法在父组件中提供,如下图

computed: {
    people: function () {
      return _.clone(this.students)
    }
  },
  methods: {
    minusPeopleNum: function () {
      return this.people.length--
    },
    random: function () {
      return _.random(0, this.people.length - 1)
    },
    lot: function () {
      var num = this.random()
      var lottedPeople = this.people[num]
      this.currStudentId = lottedPeople.id
      this.times++
      if (this.times < 50) {
        setTimeout(this.lot, 50 + (this.times * 10))
      } else {
        this.times = 0
        this.people.splice(num, 1)
        this.minusPeopleNum
        lottedPeople.isLotted = true
      }
      return lottedPeople
    }
  }

    可以实现动态改变CSS样式,但是发现不刷新的话CSS样式不改变,但是lot方法是在跑的

    解决办法是:在父组件中删除与子组件中同名的css类名

(按理说我在组件中写的css都是scoped,不应该影响组件间的,但是结果决定这scope似乎有值得商榷之处 )

    欢迎各位大佬不吝赐教。

转载于:https://www.cnblogs.com/bryanz/p/7232576.html

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值