Как использовать javascript для простой проверки кода? - PullRequest
Новая
       6

Как использовать javascript для простой проверки кода?

0 голосов
/ 07 мая 2020

Здесь я использую 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>

1 Ответ

1 голос
/ 07 мая 2020

Чтобы повторить элементы в массиве, вы можете использовать директиву v-for из vue. Ваш код будет выглядеть, как показано ниже. 

<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

...