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

Question

我相信对我想要实现的目标有更好的解释，所以请自由编辑。

假设我有一个菜单，其中列出了水果及其价格。

我想显示一个矩形，它将在项目之间进行迭代（假设它在每个项目上停留2秒钟）。另外，我想暂时使当前带有矩形的项目的字体加粗。

哪个组件或我应该在Vuetify中寻找什么？

Github源代码https://github.com/tenzan/menu-ui

Menu.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>

应用已部署https://xenodochial-wing-706d39.netlify.com/

Answer 1

是，可以突出显示序列中的行

此处有效的Codepen：https://codepen.io/chansv/pen/gObQmOx

组件代码：

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

css代码：

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

js代码：

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);
  },
})