vue methods

The v-on directive is used on the <div> element to listen to the ‘click’ event. When the ‘click’ event occurs the ‘writeText’ method is called and the text is changed.

example

<div id="app">
  <p>Click on the box below:</p>
  <div v-on:click="writeText">
    {{ text }}
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        text: ''
      }
    },
    methods: {
      writeText() {
        this.text = 'Hello World!'
      }
    }
  })
  app.mount('#app')
</script>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *