App.vue
main.js
<template>
<h1>v-on Example</h1>
<div v-bind:class="{ yelClass: bgColor }">
<p>Click the button to change background color of this DIV box.</p>
<button v-on:click="bgColor = !bgColor">Click</button>
<p>bgColor property: "{{ bgColor }}"</p>
</div>
</template>
<script>
export default {
data() {
return {
bgColor: false
};
}
}
</script>
<style scoped>
.yelClass {
background-color: rgb(255, 255, 136);
}
div {
margin: 10px;
padding: 10px;
border: dashed black 1px;
width: 250px;
}
</style>
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')