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.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 ❯<div id="app"> <div v-on:click.="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> |