Css 如何在VueJS中通过迭代将样式临时应用于一个项目？

我相信有一个更好的解释，我想实现，所以请自由编辑

比如说，我有一份菜单，上面列出了水果的价格

我想显示一个矩形，它将遍历各个项目（假设它在每个项目上停止2秒钟）。此外，我想暂时使字体粗体的一个项目，目前有一个矩形上

我应该在Vuetify中查找哪个组件或哪个位置

Github源代码

菜单.vue

<template>
  <v-simple-table>
    <template v-slot:default>
      <tbody>
        <tr v-for="item in menuItems" :key="item.name">
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
        </tr>
      </tbody>
    </template>
  </v-simple-table>
</template>

<script>
export default {
  data() {
    return {
      menuItems: {
        1: {
          name: "Apple",
          price: 20
        },
        2: {
          name: "Orange",
          price: 21
        },
        3: {
          name: "Pear",
          price: 22
        },
        4: {
          name: "Grape",
          price: 23
        }
      }
    };
  }
};
</script>

{{item.name}
{{item.price}}
导出默认值{
数据（）{
返回{
菜单项：{
1: {
名称：“苹果”，
价格:20
},
2: {
名称：“橙色”，
价格:21
},
3: {
名称：“梨”，
价格:22
},
4: {
名称：“葡萄”，
价格:23
}
}
};
}
};

已部署应用程序

---

是的，可以按顺序突出显示行

在此处打开工作代码：

组件代码：

js代码：

<div id="app">
  <v-app id="inspire">
    <v-simple-table>
      <template v-slot:default>
        <tbody>
          <tr v-for="item in desserts" :key="item.name" :class="item.highlight ? 'highlight' : ''">
            <td>{{ item.name }}</td>
            <td>{{ item.calories }}</td>
          </tr>
        </tbody>
      </template>
    </v-simple-table>
  </v-app>
</div>

.highlight{
    background-color: grey;
    font-weight: 900;
}

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
        },
        {
          name: 'Eclair',
          calories: 262,
        },
        {
          name: 'Cupcake',
          calories: 305,
        },
        {
          name: 'Gingerbread',
          calories: 356,
        },
        {
          name: 'Jelly bean',
          calories: 375,
        },
        {
          name: 'Lollipop',
          calories: 392,
        },
        {
          name: 'Honeycomb',
          calories: 408,
        },
        {
          name: 'Donut',
          calories: 452,
        },
        {
          name: 'KitKat',
          calories: 518,
        },
      ],
    }
  },
  created() {
    var self = this;
    self.desserts.map((x, i) => {
      self.$set(self.desserts[i], "highlight", false);
    });
    var init = 0;
    setInterval(function(){ 
      if(init === self.desserts.length) { 
        init = 0; 
      }
      self.desserts[init].highlight = true;
      if (init === 0) {
        self.desserts[self.desserts.length - 1].highlight = false;
      } else  {
        self.desserts[init - 1].highlight = false;
      }
      init++;
    }, 2000);
    console.log(self.desserts);
  },
})