0

funcao de vue js

queria reescrever esse codigo em vue.js

1 Resposta 1

1

Primeiramente, benvindo ao StackOverflow 😊

Quando à sua pergunta, sendo que o VueJs é muito flexivel, há várias maneiras de fazer o que pergunta, mas uma delas pode ser:

<div :class="wrapClass">
    <button @click.prevent="toggleClass">Toggle class</button>
</div>

e no script, algo como

<script>
export default {
  data() {
    return {
      wrapClass: 'class1' // class inicial
    };
  },
  methods: {
    toggleClass() {
      this.wrapClass = this.wrapClass === 'class1' 
        ? ''       // remove a class
        : 'class1' // adiciona a class
    }
  }
}
</script>
  • :class="wrapClass ao comecar um atributo com : estamos a dizer ao Vue que a palavra dentro de aspas, é uma variavel e näo uma string
  • @click.prevent="toggleClass" sendo que @ é o mesmo que v-on: estamos a dizer ao Vue que no evento click queremos que ele execute um metodo, e adicionamos .prevent para prevenir que o browser siga o "link" do botao
  • o metodo é simples, e apenas usamos uma variavel wrapClass que contem a classe original, e quando executamos o metodo toggleClass mudamos de um para o outro valor

fica aqui um exemplo no CodePen: https://codepen.io/balexandre/pen/poEGqyQ

2
  • Você não precisa utilizar o .prevent se usar o <button> adequadamente. Por padrão o <button> toma como default o type="submit", por isso o comportamento de submissão de formulário que você tenta previnir... Simplemente use <button type="button" @click="toggleClass">...</button> que assim não haverá esse comportamento de submissão de form.
    – Giovane
    Commented 19/01/2021 às 13:04
  • eu entendo, mas ele pediu como reescrever o codigo, e se faz uso de tal funcao, eu mencionei tambem 😊
    – balexandre
    Commented 19/01/2021 às 14:49

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .