| <!-- |
| * v-if="flag": display or not by the truthy/falsy result |
| --> |
| |
| <template> |
| <div> |
| <text class="btn" @click="toggle">Toggle</text> |
| <text v-if="flag" class="title">I'm ON</text> |
| <text v-if="!flag" class="title">I'm Off</text> |
| </div> |
| </template> |
| |
| <style scoped> |
| .title {font-size: 48px;} |
| .btn {font-size: 36px; text-align: center; color: white; background-color: gray; padding: 20px; border-radius: 5px;} |
| </style> |
| |
| <script> |
| module.exports = { |
| data: { |
| flag: true |
| }, |
| methods: { |
| toggle: function (e) { |
| this.flag = !this.flag |
| console.log('this.flag:', this.flag) |
| } |
| } |
| } |
| </script> |
