|
Menu
×
×
Correct!
Exercise:Provide the correct code so that the <div> element changes color when right clicked. ALSO, add code so that the default drop down menu that appears when you right click a web page, is not shown.
<div id="app">
<div v-on:click.@(13)="changeColor"
v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
<p>Press right mouse button here.</p>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
bgColor: 0
}
},
methods: {
changeColor() {
this.bgColor+=50
}
}
})
app.mount('#app')
</script>
<div id="app">
<div v-on:click.right.prevent="changeColor"
v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
<p>Press right mouse button here.</p>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
bgColor: 0
}
},
methods: {
changeColor() {
this.bgColor+=50
}
}
})
app.mount('#app')
</script>
Not CorrectClick here to try again. Correct!Next ❯ |
This will reset the score of ALL 54 exercises.
Are you sure you want to continue?