Chuyển đổi (toggle) phần tử trong Vue

Bây giờ hãy tạo một nút bấm sẽ chuyển đổi (toggle) một đoạn văn, tức là với lần nhấp đầu tiên sẽ hiển thị nó, còn với lần nhấp thứ hai sẽ ẩn đi. Để làm điều này, khi nhấp vào nút, chúng ta sẽ gọi phương thức toggle:

App.vue<template>
  <button @click="toggle">chuyển đổi</button>
  <p v-if="visible">văn bản</p>
</template>

Trong mã của phương thức, chúng ta sẽ lấy giá trị của thuộc tính visible và đảo ngược nó thành giá trị ngược lại:

javascripttoggle: function() {
  this.visible = !this.visible;
}