Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<template> <div class="greeting"> <h2>Hello, {{ name }}!</h2> <button @click="changeName">Change Name</button> </div> </template> <script> export default { name: 'Greeting', props: ['name'], data() { return { names: ['Alice', 'Bob', 'Charlie'], index: 0 } }, methods: { changeName() { this.index = (this.index + 1) % this.names.length this.$emit('update:name', this.names[this.index]) } } } </script> <style scoped> .greeting { padding: 1rem; background: #f0f4f8; border-radius: 8px; } </style>
Result
Open