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

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

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

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

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

你可能感兴趣的:(解决VUE下动态改变CSS样式不生效)