时间戳

首页 > 解决方案 > 如何使用 javascript 来简单地 vuetify 代码？

javascript - 如何使用 javascript 来简单地 vuetify 代码？

问题描述

在这里，我使用 vuetify 来显示多个按钮，但这样做我注意到许多代码一次又一次地重复。因为我有很多按钮，所以重复的代码太多了。现在，我打算减少我的代码，以便它可以简短明了，但我不能像下面的代码那样做：

export default {
    data(){
        return{
            colors: ["red","pink","purple","deep-purple","indigo","blue","light-blue","cyan","teal","green","light-green","lime","yellow","amber","orange","deep-orange","brown","blue-grey","grey"]
        }
    },
} </script>

我的代码在这里：

<template>

  <v-card
    class="mx-auto"
    max-width="500"
    outlined
  >
<div class="text-center">
  <v-btn dark large color="red" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Red</span>
</v-btn>
<v-btn dark large color="pink" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Pink</span>
</v-btn>
<v-btn dark large color="purple" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Purple</span>
</v-btn>
<v-btn dark large color="indigo" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Indigo</span>
</v-btn><br/>



<v-btn dark large color="light-blue" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Light Blue</span>
</v-btn>
<v-btn dark large color="brown" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Brown</span>
</v-btn>
<v-btn dark large color="orange" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Orange</span>
</v-btn>
<v-btn dark large color="green" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Green</span>
</v-btn><br/>


<v-btn dark large color="teal" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Teal</span>
</v-btn>
<v-btn dark large color="yellow" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Yellow</span>
</v-btn>
<v-btn dark large color="cyan" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Cyan</span>
</v-btn>
<v-btn dark large color="amber" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Amber</span>
</v-btn><br/>


<v-btn dark large color="lime" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Lime</span>
</v-btn>
<v-btn dark large color="grey" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Grey</span>
</v-btn>
<v-btn dark large color="blue-grey" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Blue-Grey</span>
</v-btn>
<v-btn dark large color="black" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Black</span>
</v-btn><br/>

<v-btn dark large color="blue" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Blue</span>
</v-btn>
<v-btn dark large color="deep-orange" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Deep Orange</span>
</v-btn>
<v-btn dark large color="deep-purple" class="ma-2" style="width:100px;">
  <span class="text-truncate" style="width:80px;">Deep Purple</span>
</v-btn>

</div>
   </v-card>
</template>

标签： javascriptvuetify.js

解决方案

要重复数组中的项目，您可以使用 vue 的 v-for 指令。您的代码将如下所示。

<v-card
  class="mx-auto"
  max-width="500"
  outlined
  >
  <div class="text-center">
   <v-btn 
      v-for="item in colors"
      :color="item"
      dark large class="ma-2" 
      style="width:100px;"
      >
      <span class="text-truncate" style="width:80px;">
        {{item.replace(/-/g, '')}}
      </span>
   </v-btn>
</div>
   </v-card>

可以在此处阅读有关 v-for 的更多详细信息。https://vuejs.org/v2/guide/list.html

推荐阅读