Question

我在这里有一个列表项，我在该列表项上循环获取图标列表。现在，我试图创建一个计算属性，以便如果我是$route.params.page === 'something'，则第一个图标将突出显示；如果我是$route.params.page === 'something else'，则第二个图标将突出显示，依此类推。但是我不确定该怎么做。

new Vue({
  el: '#app',
  data() {
    return {
      iconActions: [{
          icon: 'android'
        },
        {
          icon: 'dashboard'
        },
        {
          icon: 'book'
        },
        {
          icon: 'public'
        },
        {
          icon: 'timeline'
        }
      ],
    }
  },
  computed: {
    highlightIcon() {
      if (this.$route.params.page === 'something') {
        highlight 'first Icon'
      } else if (this.$route.params.page === 'something') {
        highlight 'second icon'
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-list v-for="(icon,i) in iconActions" :key="`${i} - ${icon}`" :class="highlightIcon ? 'white--text bg-secondary' : ''">
      <v-list-tile>
        <v-icon>{{icon.icon}}</v-icon>
      </v-list-tile>
    </v-list>
  </v-app>
</div>

这里是pen

的链接

Answer 1

最好将循环中的所有内容包装到其自己的组件中，并将数据作为prop传入。如果这样做，您将在此组件中拥有自己的作用域，您可以在其中进行常规computed()而无需进行多次if / else检查。

对于简单的情况，您也可以直接在模板中执行逻辑：

<v-list v-for="(icon,i) in iconActions"
    :key="`${i} - ${icon}`"
    :class="{ 'white--text': $route.params.page === icon.icon }">
  <v-list-tile>
    <v-icon>{{icon.icon}}</v-icon>
  </v-list-tile>
</v-list>

Answer 2

这是代码（不可运行，因为我没有完整的上下文）

想法：在highlightIconIndex中获得computed，并将其与i中的v-for通过“ Vue条件渲染” {{1 }}。

我不太确定突出显示的含义，只是看一下代码，看看它是否是您想要的。

v-if v-else

new Vue({
  el: '#app',
  data() {
    return {
      iconActions: [
        { icon: 'android' },
        { icon: 'dashboard' },
        { icon: 'book' },
        { icon: 'public' },
        { icon: 'timeline' }
      ],
    }
  },
  computed: {
    highlightIconIndex() {
      if (this.$route.params.page === 'something') {
        return 0;
      } else if (this.$route.params.page === 'something else') {
        return 1;
      }
    } 
  }
})

.highlight {
  background: red;
  color: yellow;
}

VueJs条件类/样式绑定？

2 个答案: