как динамически переключать 3 или более шрифта-иконки в vue. js - PullRequest
Новая
       19

как динамически переключать 3 или более шрифта-иконки в vue. js

1 голос
/ 22 января 2020

Я создаю мини-игру «Камень-ножницы-бумага» с vue, и я пытаюсь найти способ переключения классов, таких как переменные. например: 

<template>
  <div id="human">
    <div class="text-center">
      <div class="h2 mb-5">Human</div>

      <!-- PLEASE CHECK BELOW HERE -->
      <i class="play-hand far fa-hand-{{ iconName }}"></i>
      <!-- OR -->
      <i class="play-hand far {{ icon }}"></i>

      <div class="h3 mt-4">{{ activeHand }}</div>
      <div class="row select-hand mt-4">
        <div class="col-md-4">
          <i class="far fa-hand-rock" @click="setHand(hands[0])"></i>
        </div>
        <div class="col-md-4">
          <i class="far fa-hand-paper" @click="setHand(hands[1])"></i>
        </div>
        <div class="col-md-4">
          <i class="far fa-hand-scissors" @click="setHand(hands[2])"></i>
        </div>
      </div>
    </div>
  </div>
</template>

я отмечен комментарием. Я уверен, что вы получите то, что я хочу сделать. Я не хочу использовать document.querySelector() для этого. 


<script>
export default {
  data: () => {
    return {
      activeHand: 'Choose a Hand',
      hands: [
        {
          name: 'Rock',
          strength: 'scissor',
          weakness: 'paper',
          icon: 'fa-hand-rock'
        },
        {
          name: 'Paper',
          strength: 'rock',
          weakness: 'scissor',
          icon: 'fa-hand-paper'
        },
        {
          name: 'Scissor',
          strength: 'paper',
          weakness: 'rock',
          icon: 'fa-hand-scissors'
        }
      ]
    }
  },
  methods: {
    setHand (hand) {
      console.log(hand.name)
      this.activeHand = hand.name
      console.log(hand.icon)

      let playHandSelector = document.querySelector('.play-hand')
      playHandSelector.classList.remove(this.activeHand.includes(hand))
      playHandSelector.classList.add(hand.icon)
    }
  }
}
</script>

<style lang="scss">
#human .far {
  transform: rotate(90deg);
}
</style>

Должен быть vue способ динамического переключения класса по имени. может быть без истинного / ложного переключения?

1 Ответ

2 голосов
/ 22 января 2020

Вы должны использовать директиву

Vue для привязки классов и использовать любую переменную в этой разметке. Взгляните на документацию здесь . *1004*

В конечном итоге ваш код может выглядеть следующим образом. 

<i class="play-hand far" :class="icon"></i>

Имейте в виду, что при использовании * необходимо использовать правильный синтаксис привязки классов. 1009 * объекты или массивы .

...