Vue3 uses variable names to dynamically control styles in SetUp

Writing method 1: use toRef

first import

	import {
    
     ref, toRef，reactive} from 'vue';

then declare the variable

	const state = reactive({
    
    
		opacity: 1
	})

	const opacityRef = toRef(state, 'opacity');

and then assign the variable

opacityRef.value = 0.6;

styleUsed in , the use of two v-bind-way binding data
v-bindinstructions is mainly used for responsive updating of html attributes

	.img {
    
    
		opacity: v-bind(opacityRef);
	}

Writing method 2: use toRefs

first import

	import {
    
     ref, toRefs，reactive} from 'vue';

then declare the variable

	const state = reactive({
    
    
	opacityRef: 1
	})

	const {
    
     opacityRef } = toRefs(state);

and then assign the variable

opacityRef.value = 0.6;

Used in style, use v-bindtwo-way binding data (note: to be used in style lang="scss")
v-bindinstructions are mainly used for responsive update html attributes

	.img {
    
    
		opacity: v-bind(opacityRef);
	}