reactiveStyle
reactiveStyle is an helper function creating a reactive object compatible with an HTML style attribute.
Parameters
props
Default StyleProperties object to create the reactive one from.
Exposed
state
The reactive StyleProperties object to manipulate.
style
A reactive style attribute compatible string.
Example
<template>
<div
:style="elementStyle" @click="toggleColor"
/>
</template>
<script setup>
const { state, style: elementStyle } = reactiveStyle({
opacity: 0,
backgroundColor: 'blue',
})
const toggleColor = () => {
if (state.backgroundColor === 'blue')
state.backgroundColor === 'red'
else
state.backgroundColor === 'blue'
}
</script>
Table of Contents