解决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