Computer scienceFrontendVue.jsVue 3 SyntaxVue Directives

v-on

Theory

Rewrite the code

Report a typo

Rewrite this code to the shorthand syntax, using @.

<template>
  <button v-on:click="toggleMessage">Toggle Message</button>
  <p v-if="showMessage">Hello, Vue!</p>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true,
    };
  },
  methods: {
    toggleMessage() {
      this.showMessage = !this.showMessage;
    }
  }
}
</script>
Enter a short text
___

Create a free account to access the full topic