How to rewrite this code in Vue.js?

Question

wanted to rewrite that code on Vue.js

Answer 1

First, welcome to Stackoverflow

When to your question, since Vuejs is very flexible, there are several ways to ask what you ask, but one of them may be:

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

and in the script, something like

<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 when starting an attribute with : We’re telling Vue that the word inside quotes is a variable and not a string
• @click.prevent="toggleClass" whereas @ is the same as v-on: we’re telling Vue that at the event click we want him to perform a method, and we add .prevent to prevent the browser from following the button’s "link"
• the method is simple, and we only use a variable wrapClass which contains the original class, and when we perform the method toggleClass we change from one to the other value

here is an example in Codepen: https://codepen.io/balexandre/pen/poEGqyQ